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.

To access and use this free Figma website redesign, click the big red button below, then when Figma opens, select all the elements (Ctrl+A for PC, Command+A for Mac) then copy them (Ctrl+C or Command+C) then open a new Figma file and paste the elements in (Ctrl+V or Command+V). Either that or open the link, then go back to the Figma main menu, right click the latest item in your recent items list and click duplicate.

Author: Pablo Rossetti

Get Figma File

Providing free Figma templates and
resources for your every need.

©2020 Free Figma Templates