lite life

A top-down view of portrait and landscape oriented iPads with an ecommerce site on themA top-down view of portrait and landscape oriented iPads with an ecommerce site on them

About

personalJan 2023 - Feb 2023
designdevelopment
TypeScriptReactReact Hook FormReact RouterDOMPurifyCommerce.js (Headless CMS)RESTful APIsSPAStripeMaterial UIBabelWebpackGitVercel

Lite Life is a conceptualised e-commerce company which specialises in selling high quality, simplistic technological products for minimalistic working environments. Design for this project was handled by Material UI. The project is a Single Page Application built using React and React Router with Commerce.js (a headless CMS) and React Hook Form to handle the project catalogue, cart system, ordering and customer data. Stripe payment gateway was also configured to handle the checkout process and order confirmation. This project was compiled using Webpack then deployed for production via Vercel.

Design Decisions

Lite Life incorporates the simplistic tones of black, grey and white alongside the stark constrasts of red and violet-blue to consider both user immersion and ease-of-navigation during the checkout process (during the latter, distraction-free UX is incorporated to keep the customer on the pages until the transaction is complete.) The logo can be considered widely known and recognizable in this modern age. The stripped back, simple style reflects the design of the site, and the long branches complement the horizontal and vertical lines used in the UI.Roboto, by name, is synonymous with clean, modern technology, and this is in turn reflected through its short descenders and wide bowls, where the former aligns close to the baseline and keeps the space efficient and egonomic, akin to the technology Lite Life sells. The use of only one weight also reinforces consistency within simplicity. On the broader scale, this conveys two things: simple things can still be quality. And quality things can still be simple.

Typeface

Roboto
singular
  • 04 Regular

Branding & Assets

A close-up of a Yamaha keyboard, with the brand in clear viewA cordless screwdriver with a temperature display on the rear, surrounded by drill bitsA fibre-weaved cord, wrapped into a circle on top of a laptop keyboardA black desk lamp, on and facing the surfaceA powerbank charging, with the brand 'ANKER' printed on the cableAn iMac, with a keyboard and keypad, against a white backdropA black Macbook against a white backdropA rear-view of an earphones charging box, with the lid upright
A color palette

Screens

A white iMac with an ecommerce site open on the screen, on an office desk with a phone, coffee mug, plant and mouseA Galaxy smartphone with an ecommerce site open on the screenA side view of a Macbook and iPhone with an ecommerce site open on the screensAn iPad resting on a cushion with an ecommerce site open on the screen and a stylus pen next to itA close up of an iPhone and Airpods with a website open on the screen

Available for agency and freelance work

For AgenciesFor Clients
loading...