QUANTUM INVENTIONS
Client
Quantum Inventions
Industry
Automotive
Project
Responsive Website Design
Role
UI & UX, Art Direction, Visual Design, Usability Testing, Wordpress Development
Tools
Figma, Photoshop, Illustrator, Wordpress
Quantum Inventions (QI), the arm of Continental AG, is in the business of providing mobility intelligence to consumer, corporations and governments by leveraging on its integrated suite of mobility applications, enterprise logistics and analytics platforms.
Prior to this project, there was no common design language, UI kit nor the website that adapts to different browsing devices. Hence, QI needed a fully responsive corporate website that displays professionalism and a consistent design language system.
TYPOGRAPHY
*Trade Gothic Lt Std font was chosen and only used in all Uppercase instance as headings due to its bold appearance, a perfect complement to Work Sans’s overall smoother and rounder appearance.
COLORS
ICONOGRAPHY
*Outlined-style icons with a 4px stroke width were illustrated for its rounder, fuller and friendlier look. These icons, exported in SVG format, are resolution-dependless, fully scalable and color-customizable, ideal for any scalable design.
GRIDS & LAYOUTS
Grids help give shape and hierarchy to web design.
In this project, a hybrid solution consisting of both the fixed and fluid layout was implemented. The grids and layout were completely adhere to the standard Bootstrap framework where the one-column is 1320px wide and placed horizontally-center in the Desktop view (XXL viewport size). It’s also flexible enough to cater for a range of mobile devices as small as 320px in the Mobile View (XS).
Fixed Layout: Contents will remain unchanged and displayed in the fixed width of 1320px.
Fluid Layout: Banner image here will be stretched proportionately to fill up the extra screen estate. Higher resolution and bigger image is generally required for such fluid layout to retain its clarity.
Fixed Layout: Most content will be displayed with a fixed width of 1320px and centered horizontally. On mobile devices, elements such as text, images, videos, etc., will be rearranged to fit the screen size and also centered horizontally.
Fluid Layout: In Desktop view, some banner images will be displayed in a fluid layout, stretching to the maximum size to fully utilize the user's screen. On mobile devices, banner images will also be resized to fit the screen in a fluid layout. In these cases, a different image, usually in portrait format, is prepared specifically for mobile screens. Modern HTML/CSS techniques enable this approach, allowing the use of different images interchangeably for desktop and mobile views.
VISUAL DESIGN
