lite life
![A top-down view of portrait and landscape oriented iPads with an ecommerce site on them](/_next/image?url=%2Fimages%2FLiteLife%2Fmockups%2FLiteLife-Desktop-1.jpg&w=3840&q=75)
![A top-down view of portrait and landscape oriented iPads with an ecommerce site on them](/_next/image?url=%2Fimages%2FLiteLife%2Fmockups%2FLiteLife-Mobile-1.jpg&w=1920&q=75)
About
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
- 04 Regular
Branding & Assets
![A close-up of a Yamaha keyboard, with the brand in clear view](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FYamaha.jpg&w=1080&q=75)
![A cordless screwdriver with a temperature display on the rear, surrounded by drill bits](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FScrewdriver.jpg&w=1080&q=75)
![A fibre-weaved cord, wrapped into a circle on top of a laptop keyboard](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FCord.jpg&w=1080&q=75)
![A black desk lamp, on and facing the surface](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FDeskLamp.jpg&w=1080&q=75)
![A powerbank charging, with the brand 'ANKER' printed on the cable](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FChargingBank.jpg&w=1080&q=75)
![An iMac, with a keyboard and keypad, against a white backdrop](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FiMacWhite.jpg&w=1080&q=75)
![A black Macbook against a white backdrop](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FBlackMacbook.jpg&w=1080&q=75)
![A rear-view of an earphones charging box, with the lid upright](/_next/image?url=%2Fimages%2FLiteLife%2Fassets%2FEarphones.jpg&w=1080&q=75)
Screens
![A white iMac with an ecommerce site open on the screen, on an office desk with a phone, coffee mug, plant and mouse](/_next/image?url=%2Fimages%2FLiteLife%2Fmockups%2FLiteLife-Mobile-2.jpg&w=3840&q=75)
![A Galaxy smartphone with an ecommerce site open on the screen](/_next/image?url=%2Fimages%2FLiteLife%2Fmockups%2FLiteLife-Mobile-3.jpg&w=3840&q=75)
![A side view of a Macbook and iPhone with an ecommerce site open on the screens](/_next/image?url=%2Fimages%2FLiteLife%2Fmockups%2FLiteLife-Mobile-4.jpg&w=3840&q=75)
![An iPad resting on a cushion with an ecommerce site open on the screen and a stylus pen next to it](/_next/image?url=%2Fimages%2FLiteLife%2Fmockups%2FLiteLife-Mobile-5.jpg&w=3840&q=75)
![A close up of an iPhone and Airpods with a website open on the screen](/_next/image?url=%2Fimages%2FLiteLife%2Fmockups%2FLiteLife-Mobile-6.jpg&w=3840&q=75)
Available for agency and freelance work