WooCommerce Redesign

Learn how to improve your Figma website design skills by studying this fantastic page redesign.

So what exactly can you learn from this Figma design? Well what is included is a 'before' and 'after' snapshot of the design, showing how the designer kept the same general structure but iteratively improved on every element.

Updates include:

Color: He created a more vibrant, modern and engaging colour scheme.

Hierachy: He further accentuated content areas and fonts, making titles larger and body copy more subtle.

Fonts: Crisper, cleaner and more modern fonts are used.

Spacing: All elements now have more white space to let each element breath and feel impactful on it's own.

Responsive Scaling: All elements have been scaled up to better accommodate higher resolution monitors.

Alignment: Content has been restructured to better fill the space and align more naturally.

I could give more examples (such as imagery, tone, mobile support)but maybe it's time for you to analyze this website redesign and find out for yourself how the content has been improved and modernized.