Multi-disciplinary Creative Professional Specializing in Graphic, User Interface Design and Professional Photography.

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.

Services

Design system, design components, UI patterns, UI style guide, user experience

Motivation

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)

Hero block in two-column layout with CTA button.

Next Up

© 2023 | WEB DESIGN AND BUILD BY TAREK MARZOUKI

Digital Design

Photography