Leveraging The Power of Components & Design Elements
About the subject matter
Reusable design elements/components are a great way to ease the design process and be efficient in terms of working with React and front-end developers, they serve as a design kit for future developments and iterations and also a tool to define a visual language.
For me, an experienced visual designer is someone who should acquire the skill of being versatile and that has nothing to do with being someone who can do it all but it’s about being able to research and develop solutions to different design problems from all genres so this case will be hands-on on how to design and use components as a leverage to enhance any user interface.
Approach
My approach consisted of producing as many reusable UI elements as I could for different types of projects and genres which will include UI cards, hero banners, UI chips, and data visualization graphs.
UI cards
Data visualization
Chips components
Hero pages
Hero page for a clothing brand
Hero block with full-screen imagery and overlay with noise texture.
Hero page for a clothing brand (Editorial edition)
Feature section in two columns layout with a collage of lookbook imagery and a CTA.
Hero page for a photography blog
Hero section with a full-width image and an overlay.
Hero page for a photography blog (Editorial edition)
Hero block in two-column layout with CTA button.
Hero page for a photography blog
Hero section with a full-width image and an overlay.
Hero page for a photography blog (Editorial edition)