U-dsgn.

Description

What's special about this project? Unlike The Grapes (which is a pretty complicated and highly customizable E-commerce website), this one is easier to use to explain my process of development, as it's a simple and straightforward website that was developed just in three days.

• Day 1

  Fast paper wireframing, design system development and full pages design

• Day 2

  HTML template of the website.

• Day 3

  WordPress version of the website and implementation of additional customization functionality.

Design system

I love to create a design system. It makes every element of the website meaningful and provides really structured and consistent visuals. I start with the basic patterns (colors, typography, buttons, tables, navigation), then jump to advanced patterns (post preview, header, footer) and end with full pages design.

HTML Template

After the design stage is accomplished, I jump to basic front-end development and create a product that can be touched and experienced by the client. Usually, the most drastic changes have already been made during the design stage. HTML template helps to tune the "feeling" and UI of the website.

Customization

The client was already slightly familiar with using WP Widgets for controlling some basic content of the website. So, I've decided... Let's make the client control the website via Widgets. It isn't an optimal solution. For The Grapes I've developed custom fields for posts, pages, and WooCommerce products using native fields and hooks without external plugins. But here the client was happy just to use something that he used before. So, every image and text can be managed via widgets.