•
1 13

Maria Elena

Maria Elena

  • Project duration: 2 month
  • Pixel Perfect: Yes
  • Client: Cermany
  • *Visual design and Development for Maria Elena, in collaboration with and directed by Twntytwo

Founded by Maria Elena Groenewoud, Studio Maria Elena blends modern design with carefully selected vintage finds. The brand focuses on interiors and objects that feel personal, meaningful, and enduring.

Visit Maria Elena
  • Scroll down to get more information!
View full details

Responsibilities

  • Conducted full project estimation, including scope analysis and time/resource planning.

  • Performed project setup, configuring the development environment and Git workflow.

  • Developed and implemented all website sections with Pixel Perfect accuracy according to the provided design, ensuring full scalability across all screen sizes for a seamless responsive experience.

  • Developed and implemented all website sections based on client requirements and design specifications.
  • Integrated and customized animation libraries (GSAP) to enhance user experience with smooth, interactive motion effects.
  • Delivered a finalized project, ensuring quality assurance and performance optimization.
  • Created a client-friendly guide with clear instructions on how to manage website sections and content effectively.
  • Used Git version control throughout the development process for collaboration, tracking, and deployment.

Technologies & Tools Used:

  • Shopify Liquid
  • JavaScript
  • HTML
  • CSS/SCSS
  • Builder setup (Gulp) for streamlined development.
  • Node.js
  • Cart API
  • GIT for version control

Apps used on the project:

  • Insta Feed

Section

Menu

Developed a customizable and animated menu, ensuring smooth transitions and visually appealing interactions.

Page

Hero Image

Built a Hero Image section featuring animated titles with fade and slide-in effects, where each title appears sequentially with a programmed delay.

Section

Footer

Developed a custom footer containing all essential site information and links, and integrated the InstaFeed app to dynamically display the latest Instagram images.

Section

Images and text

Developed a custom section that displays one or multiple images alongside text, with an option in the Admin to choose the text position.

Each image supports different ratios and sizes, while both images and text scale responsively depending on the screen size.

The text also features a decorated initial letter for enhanced design.

Section

New Articles

This section allows flexibility in displaying content: you can either manually select specific articles one by one, or simply choose a blog and automatically showcase the latest four articles. This ensures that visitors always see the most up-to-date content without additional setup.

The layout is fully responsive and scalable – both images and text dynamically adjust their sizes depending on the screen, providing a consistent and visually appealing experience across all devices.

Page

Product Page

Developed a custom product detail page that highlights product images, detailed descriptions, and pricing with a clean and minimal layout. The page features:

  • Product gallery with multiple images and scalable layouts for different screen sizes.
  • Product title, price, and detailed description displayed with pixel-perfect typography.
  • Shipping & Returns section with editable content, ensuring transparency for customers.
  • Fully responsive and scalable — both images and text sizes adjust depending on the screen for consistent user experience across devices.

Page

Collection page

Developed a custom product grid with dynamic “Sale” and “Out of Stock” labels for enhanced user experience and clear product status visibility.

Section

Quote section

Developed a custom quote section designed to display inspirational text or brand messages. Features include:

  • Customizable text field in the Admin for easy content management.
  • Support for typographic styling such as italicized words and highlighted phrases.
  • Fully responsive and scalable — both text size and spacing adapt seamlessly across all screen sizes.

Page

Terms pages

Created custom terms / policies pages template

Similar projects