Muhammad Ahsan Pervaiz

Typography & Vertical Rhythm for UI Designers and Web Developers

Model looks a lot better now. I liked the v1.1 better. Now few more tips here. Don't try to emphasize more than 2 or 3 things in a view like the color and quantity selection boxes must not get attention. First priority is title, price and add to cart second is the details of the product So you need to first decide which things needs more highlight or attention on this product page See how I have tried your same concept with few typeface variations from this link <a target="_blank" rel="noopener external nofollow" href="https://xd.adobe.com/view/23c83963-038e-41f5-9644-e0433943da81-769b/">xd.adobe.com/view/23c83963-038e-41f5-9644-e0433943da81-769b/</a>

From UX point of view, I would never design a website without a search bar in the top nav area or at least a search icon somewhere Then for me this design is a bit on the dull side. Every color is in washed out kind of theme. So I would either add more saturation to the model on the right. Or maybe different image like model with black hair or some light makeup. I would make Buy Now button black color to be more saturated and more black to give it more power. Maybe try to have different weight for the heading of the product like you have Elephant pendent, I might use bold or some other weight for it. Also try to make the two prices different in scale. The one you have cut-out and the new price, try to alter their sizes. What about using the LOGO Typeface on the price! Just an idea

Thanks for this feedback its very helpful. I tried to keep it minimal and incorporate the search into a hamburger menu at the side. I've changed the icon design of it slightly and returned the saturation of most of the elements back to normal. Getting the vertical rhythm right I find the hardest and I'm still not sure if the typographic elements are in harmony. It definitely looks better though.

Please take my class on Creative Layout Design which will make you a lot better and don't get too much fixed on vertical rhythm.
Class Link ► <a target="_blank" rel="noopener external nofollow" href="https://skl.sh/2qpQMUz">skl.sh/2qpQMUz</a>

The space system in this example is based on multiples of 6

Thanks Muhammad enrolling on that class now!

Very minimal elegant style. Increase the letter spacing in the small grey text below BUY NOW button. Add at least 5% letter-spacing

Hey man thanks for the input, I've added some spacing there. If you were being really critical how else would you improve this one?

v1.4
<img style="margin-left:auto;margin-right:auto;" src="https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/9d595513.jpg" alt="A page for some pendants I made. - image 1 - student project" srcset="https://static.skillshare.com/cdn-cgi/image/quality=80,width=600,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/9d595513.jpg 600w, https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/9d595513.jpg 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy"> v1.3 <img style="margin-left:auto;margin-right:auto;" src="https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/ae6e7667.jpg" alt="A page for some pendants I made. - image 2 - student project" srcset="https://static.skillshare.com/cdn-cgi/image/quality=80,width=600,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/ae6e7667.jpg 600w, https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/ae6e7667.jpg 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy"> v1.2 <img style="margin-left:auto;margin-right:auto;" src="https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/4d286e79.jpg" alt="A page for some pendants I made. - image 3 - student project" srcset="https://static.skillshare.com/cdn-cgi/image/quality=80,width=600,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/4d286e79.jpg 600w, https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/4d286e79.jpg 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy">
v1.1
<img style="margin-left:auto;margin-right:auto;" src="https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/88d0f122.jpg" alt="A page for some pendants I made. - image 4 - student project" srcset="https://static.skillshare.com/cdn-cgi/image/quality=80,width=600,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/88d0f122.jpg 600w, https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/88d0f122.jpg 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy">
v1.0
<img style="margin-left:auto;margin-right:auto;" src="https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/cddf62e5.jpg" alt="A page for some pendants I made. - image 5 - student project" srcset="https://static.skillshare.com/cdn-cgi/image/quality=80,width=600,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/cddf62e5.jpg 600w, https://static.skillshare.com/cdn-cgi/image/quality=80,width=1000,format=auto/uploads/project/1c127aa4a5711ca2d51d5099dfb5b6d3/cddf62e5.jpg 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy">Any input/feedback welcome.

A page for some pendants I made.

Company

Community

Teaching

Mobile

English

English