Mostafa Malek | Graphic Designer | Branding & UI/UX Specialist

A modern graphic design composition featuring a grayscale portrait of a thoughtful man with geometric elements, including a yellow triangle and a blue circle, overlaid with bold red text that reads The Swiss.

A modern poster design displayed in a minimalistic office setting. The poster features a grayscale portrait of a man holding his head with both hands. His face is accented with bold geometric shapes, including a yellow overlay on his forehead, blue highlights on his right hand, and red highlights on his left hand. The background includes subtle architectural lines, emphasizing clean and structured aesthetics.

Campaign Devolopment

THE SWISS

Visual Identity system

Zurich Olympic

Mockup of the BreatheEco mobile app user interface displayed on a smartphone. The design features a sleek, modern layout with vibrant blue and purple gradients, showcasing user experience and interaction elements, including menus and app screens.

A grid layout displaying multiple mockups of the BreatheEco mobile app. Each screen showcases clean and interactive UI/UX elements with blue and white themes, demonstrating features like map navigation, data visualization, and user settings on a smartphone.

UI-UX Design

BREATHE-ECO App

An open book showcasing Bauhaus-inspired designs. The left page features a blue ‘b’ with a yellow triangle, while the right page highlights geometric architectural visuals with red and black elements. The minimalist layout embodies Swiss-style design principles with clean typography and a modern aesthetic.

Typography & Print DEsign

Bauhaus

Magazine layout featuring Billie Eilish on the cover with a modern and edgy design. The cover highlights the text ‘The New Edge of Seventeen’ and includes bold typography and a teal-toned portrait of Billie Eilish. The open spread reveals sleek typography and artistic imagery, emphasizing the song ‘Ocean Eyes’ with a vibrant and sophisticated aesthetic.

layout &magazines design

Billie Eilish

A comprehensive visual showcase of ‘The Swiss’ design project displayed in a minimalist exhibition setting. The display includes posters, prints, a tote bag, and other branded materials, featuring bold Swiss-style design elements such as geometric shapes, modern typography, and a grayscale portrait. Vibrant yellow, red, and blue accents highlight the designs, emphasizing the clean and structured aesthetic of Swiss minimalism.

An invitation card for ‘June 2023 SWISS Exhibition’ hosted by The Design Museum. The design features a minimalist layout with a bold yellow ‘J’ and gray ‘une’ typography. The invitation includes details about the International Typographic Style, influenced by Bauhaus and Jan Tschichold’s New Typography. The card also includes a postal stamp, an address for Mostafa Malek in Northridge, CA, and the Design Museum’s contact details at the bottom.

An outdoor advertisement display showcasing ‘The Swiss’ exhibition poster. The design features a grayscale portrait of a thoughtful man, geometric shapes in yellow, red, and blue, and bold red typography. The background highlights Bauhaus-style architecture with balconies. The modern composition emphasizes clean lines, structured aesthetics, and typographic precision. The poster is situated in a modern plaza with contemporary glass buildings and landscaped greenery in the background.

A Swiss-style graphic design featuring a grayscale portrait of a man holding his head with both hands. The design incorporates bold geometric elements, including a transparent yellow triangle overlaying the man’s face and a solid blue circle near his hand. The text ‘The Swiss’ is prominently displayed in bold red and black typography, with the word ‘Exhibition’ subtly placed in the background. Minimalist and clean design aesthetics reflect Swiss-style principles.

A Swiss-style graphic design showcasing a group of individuals from the Bauhaus movement era with a yellow triangular highlight, a blue circular accent, and bold red typography reading ‘The Swiss Exhibition.’

A minimalist Swiss-style poster displayed in a modern office setting. The design features a grayscale portrait of a man holding his head with both hands, accented by bold geometric elements. A transparent yellow triangle overlays the upper face, with solid red and blue circles highlighting the hands. The composition includes clean, structured typography in the lower section, emphasizing the Design Museum and details about the Swiss exhibition. The setting includes sleek wood paneling, glass walls, and natural lighting, enhancing the contemporary atmosphere.

A Swiss-style collage showcasing multiple poster designs and promotional materials for ‘The Swiss Exhibition.’ The layout includes bold red and yellow typography, geometric elements like triangles and circles in primary colors, grayscale portraits, and architectural visuals influenced by Bauhaus. The designs highlight clean lines, minimalism, and typographic precision.

A modern exhibition space showcasing three Swiss-style posters framed on a light blue wall. The left poster features bold red typography ‘The Swiss’ with geometric shapes and Bauhaus-style architecture. The center poster displays a group of Bauhaus individuals with a yellow triangular highlight, emphasizing Swiss-style design principles. The right poster portrays a grayscale portrait of a man with geometric accents in yellow, blue, and red, highlighting minimalism and typographic precision. The room is complemented by a clean, minimalist design with white benches and natural lighting from skylights.

A drawstring bag featuring a Swiss-style design with a grayscale portrait of a man holding his head, overlaid with bold typography reading ‘The Swiss Exhibition’ in red and yellow, accented by geometric elements such as a blue circle. The bag emphasizes minimalism and structured aesthetics.

A grayscale photograph of athletes in the middle of a race start, showcasing intense motion and focus. The image captures the runners in a crouched sprinting position, with a background featuring spectators and a track field, emphasizing dynamic movement and athletic determination.

vibrant poster for the Zurich 2038 Olympic Games, featuring bold typography and a Swiss-inspired grid layout. The words ‘Olympic Zurich’ are prominently displayed in black and blue, alongside the large number ‘38’ in orange and red outlines. The design includes descriptive text in the lower section, emphasizing the project’s focus on Swiss design principles, cohesion, and precision, inspired by Josef Müller-Brockmann. The poster’s warm orange background complements the clean and structured aesthetic.

This image appears to combine a color palette breakdown with a grayscale, artistic image of a person tying their shoe. The palette includes specific Pantone color codes and their corresponding hex values, likely used to define a cohesive visual identity. The image style evokes a minimalist, Swiss-inspired design aesthetic with a modern and energetic focus. If you’d like to refine or adjust the design, feel free to let me know!

Display of three Swiss-style posters for the Zurich 2038 Winter Olympic Games mounted on a black perforated backdrop. The left poster features a cyclist in motion with bold blue and black typography stating ‘Zurich 06-11-38.’ The center poster showcases a tennis player in a dynamic pose, highlighted with red halftones and vertical yellow typography reading ‘Zurich 08-11-38, 07-12-38.’ The right poster captures a sprinter in action with clean blue and black typography echoing ‘Zurich 06-11-38.’ All posters emphasize Swiss-inspired minimalism, bold colors, and dynamic design elements.

A vibrant display of three posters promoting the Zurich 2038 Winter Olympic Games in a subway setting. Each poster features dynamic Swiss-style designs with bold typography and halftone imagery of athletes in action. The left poster highlights a cyclist with blue and red accents and the text “Zurich 06-11-38.” The center poster showcases a tennis player in motion, emphasizing yellow and red tones with “Zurich 06-11-38” text. The right poster depicts a sprinter mid-stride with a minimalist blue and black color scheme and “Zurich 06-11-38.” The composition reflects a cohesive, modern aesthetic with clean lines and dynamic energy. A passerby in a denim jacket adds movement and realism.

Two hoodies inspired by the Zurich 2038 Winter Olympic Games, showcasing bold Swiss-style designs. The left hoodie features a vibrant red halftone image of a tennis player mid-swing with yellow vertical typography reading ‘Zurich.’ The right hoodie displays a red halftone image of a sprinter in motion, complemented by bold blue typography running vertically along the side. Both hoodies incorporate a modern aesthetic with clean, dynamic lines and colorful drawstrings that match the design elements, reflecting energy and Swiss design precision.

A promotional image for the BreatheEco application UI/UX case study. The design showcases a sleek, blue background with the app’s name, ‘BreatheEco,’ prominently displayed alongside the tagline ‘Designed only for Breathe SoCal.’ Two smartphones are featured, showing the app interface with the main screen titled ‘Choose Your Challenge,’ offering options such as Eco-Ride Challenge, Green Route Planner, Carpool Connector, and Transit Rewards. The image emphasizes clean design and user-friendly navigation. The designer, Mostafa Malek, is credited as UX/UI Designer and Concept Developer through highlighted buttons.

An informational presentation slide for the Breathe-Eco Project. The text highlights EcoPath, a user-friendly mobile application designed to promote environmentally conscious decisions. It integrates real-time data, sustainable commuting routes, community challenges, and educational resources to foster a greener lifestyle. The overview explains how the app helps users reduce their carbon footprint, engage in eco-friendly challenges, and access educational content. The slide mentions that EcoPath is available on both iOS and Android platforms, with yellow buttons indicating the respective platforms. The design features a dark gradient background with bold white and blue text for clarity and emphasis.

A presentation slide titled ‘My Role’ for the BreatheEco project, highlighting the role and contributions of the lead UX/UI designer. The slide describes responsibilities such as orchestrating the visual and functional framework of the application to meet high design standards while aligning with eco-conscious commuting needs. Key areas of contribution are outlined in labeled sections: ‘UI Documentation’ for detailed guidelines, ‘Provide Assets’ for ensuring consistent and functional design across platforms, ‘UX/UI Audit’ for preempting usability issues, ‘User Testing’ involving usability and A/B tests, ‘Flow Documentation’ to aid developers in understanding app processes, and ‘Research’ to align app features with market and user needs. The slide features a grayscale circular portrait of the designer in a formal shirt and tie, placed in the top-right corner. The background is a dark gradient with white and blue text for emphasis.

A presentation slide titled “Design Strategy” outlines the core elements of BreatheEco’s design approach, aimed at creating a sustainable, user-centric mobile experience for environmentally conscious transportation. The content is divided into four sections:
1. Intention: To provide a robust platform for users to plan eco-friendly commutes, earn rewards, and track environmental impact.
2. Target User: Focused on individuals aged 18-50 who use smartphones as their primary device and are committed to reducing their carbon footprint.
3. General Task: The app integrates features like route planning, commute tracking, reward systems, and community challenges to promote sustainable habits.
4. Success Factors: Success is measured by user engagement levels, commute tracking accuracy, user satisfaction scores, and the environmental impact reported by users.

The slide uses a dark gradient background, bold yellow and blue text for headings, and white text for descriptions, emphasizing a clean and professional layout.

A timeline illustration titled “Design Process” depicting the phased development of the BreatheEco application. The text explains the creation process, starting with deep user research and progressing through detailed UX and UI design stages to refine functionality and aesthetics. The timeline spans from September to December, with key milestones: “Problem & Solution” and “Research” in September weeks 1-2, “Surveys & Interview” and “User Persona” in September weeks 3-4, “Empathy Map,” “User Flow,” and “Low-fi Wireframes” in October weeks 1-2, and “Mid-fi Wireframes” and “Style Tiles” in October weeks 3-4. “User Testing” and “High-fi Wireframes” occur in November weeks 1-4, followed by “Visual Design Documentation” in December weeks 1-4. The visual emphasizes a structured approach to delivering a user-friendly platform for promoting sustainable living.

A presentation slide titled “Design Process” illustrates the phased development timeline for the BreatheEco project, detailing key milestones from user research to high-fidelity prototypes. The timeline spans from September to December and is divided into weekly segments:
• September W1-2: Identifying “Problem & Solution.”
• September W3-4: Conducting “Research,” “Surveys & Interviews,” and creating “User Persona.”
• October W1-2: Developing “Empathy Map,” “User Flow,” and “Idea Sketches.”
• October W3-4: Producing “Low-fi Wireframes,” “Mid-fi Wireframes,” and “Style Tiles.”
• November W1-2: Conducting “User Testing.”
• November W3-4: Developing “High-fi Wireframes.”
• December W1-2: Finalizing “Visual Design Documentation.”

The timeline emphasizes a structured approach, with yellow and blue color codes used to highlight different tasks against a dark gradient background, reflecting a professional and modern aesthetic.

A presentation slide titled “UX/UI Roles and Responsibilities” showcases the key phases and components of user experience (UX) and user interface (UI) design processes. The slide is divided into four main sections, aligned with a central Venn diagram depicting the overlap between UX (yellow circle) and UI (blue circle), representing their collaborative nature.
• User Research (Yellow): Includes activities such as “Problem & Solution,” “Objectives & Goals,” “Research,” and “Survey & Interview.”
• Research Analyst (Yellow): Covers tasks like “User Persona,” “Empathy Map,” and “User Flow.”
• Interface Design (Blue): Focuses on “Mid-fi Wireframes,” “Style Tiles,” and “User Testing.”
• Design Specs (Blue): Encompasses “UI Prototype,” “High-fidelity Wireframes,” and “Visual Design Documentation.”
• Design Ideation (Yellow): Highlights “Idea Sketches” and “Low-fidelity Wireframes.”

The slide features a dark gradient background with text in contrasting yellow, blue, and white, creating a clean and professional aesthetic. The layout emphasizes the distinct yet interconnected roles in UX/UI design, making the information easy to follow.

A presentation slide titled “Problem Statement” features a clean design on a dark gradient background. The slide includes two white abstract scribbles, visually representing confusion or complexity, connected by a continuous white line. Below, the text highlights the problem:

“In a world increasingly aware of environmental challenges, many individuals lack the tools and knowledge necessary to make sustainable lifestyle choices. Despite the desire to act, they face barriers in accessing real-time environmental data, understanding the direct impact of their actions, and finding practical, daily solutions that contribute to global sustainability. This gap hinders personal and collective efforts to combat climate change effectively.”

The design uses blue and white text for contrast, with “Problem Statement” prominently displayed in bold blue to draw attention. The visual and textual elements emphasize the challenge of simplifying complex environmental issues for users.

A presentation slide titled “Solution” uses a dark gradient background with a visual sequence of white spiraling lines transitioning into yellow lightbulb-like shapes, symbolizing clarity and innovative ideas. The design progresses from abstract scribbles to a glowing yellow lightbulb with white rays, illustrating the transition from complexity to a clear solution.

The text below explains EcoPath’s solution:
• Creation of an all-encompassing eco-friendly app: Includes features like real-time environmental monitoring, route optimization for lower carbon footprints, and educational resources.
• Real-Time Data & Alerts: Provides users with live updates on local air quality, energy usage, and more, enabling immediate and informed action.
• Sustainable Route Planner: Offers the most eco-efficient routes for daily commutes, reducing individual carbon emissions.
• Community Challenges and Rewards: Engages users in sustainability initiatives with a reward system to encourage eco-friendly habits.
• Interactive Educational Tools: Integrates augmented reality and interactive content to make sustainability education engaging and impactful.

The design and content emphasize EcoPath’s innovative approach to empowering users with practical tools for sustainable living.

A presentation slide titled “Objectives & Goals of Breathe-Eco” with a tagline, “Empowering Sustainable Lifestyles Through Technology.” The slide is designed on a dark gradient background with blue and yellow text accents.

It outlines the following objectives and their impacts:
1. Enhance Environmental Awareness:
• Educate users about their environmental impact using real-time data and analytics to foster deeper sustainability understanding.
• Impact: Increase user knowledge and awareness, leading to informed and conscious decision-making.
2. Promote Sustainable Commuting Options:
• Offer optimized commuting routes and alternatives to reduce carbon emissions and encourage greener transportation.
• Impact: Reduce users’ carbon footprints by providing smarter, eco-friendly commuting choices.
3. Facilitate Community Engagement:
• Build a platform for users to participate in community-driven environmental challenges and initiatives.
• Impact: Strengthen community ties and collective efforts in sustainability, amplifying the overall impact.
4. Incorporate Educational Resources:
• Integrate interactive and engaging content on environmental conservation and sustainability practices.
• Impact: Equip users with knowledge and skills for sustainable daily practices.
5. Deliver Personalized User Experiences:
• Tailor app features to user preferences and behaviors to enhance usability and effectiveness.
• Impact: Boost user engagement and satisfaction, ensuring long-term use and advocacy for sustainability.

The content and layout aim to showcase Breathe-Eco’s strategic focus on environmental awareness, sustainable practices, and user-centric solutions.

A presentation slide titled “User Research” on a dark gradient background. The slide emphasizes the importance of user research in developing BreatheEco. It explains that surveys and interviews were conducted to understand potential users’ behaviors, preferences, and challenges in adopting sustainable commuting habits.

Below the main section is a highlighted subsection titled “Survey,” which details that:
• A survey was conducted with 30 potential users.
• The data collected included both quantitative and qualitative insights.
• The target demographic consisted of individuals aged 18-45 who are interested in reducing their carbon footprint.

The slide design uses bold white text for headings and blue text for key subsections, ensuring clarity and focus on the content.

A presentation slide displaying three donut charts on a dark gradient background, visually representing survey results for BreatheEco’s user research.
1. First Chart (Age Group):
• The chart answers, “What is your age group?”
• Segments: 43% (18-25, blue), 38% (26-35, yellow), 19% (36-45, white).
2. Second Chart (Carpool Feature Likelihood):
• The chart answers, “How likely are you to use a carpool feature to reduce your environmental impact?”
• Segments: 51% (somewhat likely, yellow), 41% (very likely, blue), 8% (unlikely, white).
3. **Third

Chart (Carbon Footprint Challenge Interest):**
• The chart answers, “Would you be interested in a feature that challenges you to reduce your carbon footprint weekly?”
• Segments: 82% (interested, blue), 16% (somewhat interested, yellow), 2% (not interested, white).

The color-coded legend at the bottom links the responses with the color segments, ensuring clear and accessible data interpretation.

An ‘Interview’ section highlighting feedback from six participants selected for virtual interviews conducted via Zoom to explore commuting routines and preferences. The section features participant names, roles, and quotes:
1. Mostafa Haghi (Architect): ‘An app that suggests the least polluting route would not only help the environment but also help me manage my time better.’
2. Mobina Kalhorian (Consultant): ‘I need real-time updates on public transit delays and bike-share availability to rely more on sustainable transport options.’
3. Elham Badrabadi (Software Developer): ‘It’s hard to find safe and quick bike routes in the city. An app that could provide this information would be invaluable.’
4. Emma Clarke (School Teacher): ‘I’d use an app that tracks my carbon savings from commuting—it would motivate me to keep using green modes.’
5. Natalie Chen (Marketing Manager): ‘I’m interested in sustainable travel methods. An app that plans efficient routes with minimal environmental impact would significantly help.’
6. Alex Johnson (University Student): ‘I prefer not driving for environmental reasons, but need reliable transit updates. An app offering this would be incredibly useful.’

The layout emphasizes user diversity and their unique insights to guide eco-friendly app development.

User Flow Diagram for the BreatheEco App showcasing the user’s journey from downloading the app to participating in eco-friendly challenges. The flowchart illustrates the app’s intuitive navigation, emphasizing user actions and decision-making points to promote environmentally friendly choices. Key features of the flow include:
1. Starting Point: The user downloads the app.
2. Sign-In Process: Users can either log in or create an account, with options for third-party integrations such as Google or Apple sign-in.
3. Onboarding: Guided steps to introduce users to the app’s features and benefits.
4. Main Navigation: Multiple pathways for accessing features like:
• Sustainable Route Planner
• Eco-friendly Challenges
• Carbon Footprint Tracker
• Community Engagement
5. Decision Points: Represented by diamond shapes, showing choices such as joining challenges, tracking commutes, or customizing user preferences.
6. Actions: Circular nodes represent tasks like setting goals, logging activities, or accessing rewards.
7. Completion: Pathways converge to outcomes like earning rewards, viewing sustainability reports, or sharing progress within the community.
8. Legend: A legend at the bottom explains the diagram’s symbols: blue circles for actions, yellow diamonds for decision points, and white rectangles for processes.

This user flow highlights the app’s thoughtful design, empowering users to seamlessly adopt eco-friendly habits while navigating through personalized and community-driven features.

Low-Fidelity Wireframes for the BreatheEco App showcasing the foundational design of the app’s user interface and interaction flow. The wireframes represent early-stage sketches that focus on the layout and functionality, simplifying complex concepts into basic elements to ensure clarity and usability. Key details include:
1. Primary Pages:
• ‘Our Mission’ and ‘Rich Heritage’ screens providing introductory content.
• ‘Make a Difference’ and ‘Select Service’ screens outlining user engagement options.
• ‘Transportation’ page displaying multiple transport options.
2. User Authentication:
• ‘Create an Account’ and ‘Sign In’ pages.
• ‘Forgot Password’ and ‘New Password’ workflows.
3. Home and Challenges:
• ‘Good Morning’ dashboard with personalized content.
• ‘Badges’ page showcasing achievements.
• ‘Choose Challenge’ pages with multiple task options.
4. Interactive Features:
• ‘Source’ and ‘Step-by-Step’ screens guiding users through eco-friendly practices.
• ‘AR’ (Augmented Reality) section for interactive experiences.
• ‘Setting’ page for user preferences.
5. Visual Layout:
• Basic placeholders for images and text content.
• Uniform navigation bar across pages for consistency.

These wireframes highlight the app’s structural design, prioritizing functionality and ease of navigation, while serving as a blueprint for further refinement during the development process.

Style Tiles for the BreatheEco App, showcasing the visual identity elements used in the design. The tiles include:
1. Color Palette:
• Primary colors: Blue (#4285F4), Yellow (#FBBC01), and Red (#EA4335).
• Secondary colors: Green (#0F652D), White (#FFFFFF), Light Blue (#D2E3FC), and Grey (#9AA0A6).
2. Typography:
• Typeface: Helvetica Neue.
• Styles: Regular (40/50) and Bold (16/23).
• Example text demonstrates uppercase and lowercase alphabets along with numerals.
3. Icons and Graphics:
• A set of blue icons representing eco-friendly and transportation concepts, such as lungs, leaves, buses, bicycles, and carpooling.
• Colored illustrations of people using various transportation modes (e.g., bicycles, buses, and carpooling).
• A row of circular avatars representing diverse users.
4. Design Elements:
• Minimalist curves complement the visual design.
• The overall design reflects an eco-friendly and accessible theme, with an emphasis on clarity and sustainability.

Mid-Fidelity Wireframes for the BreatheEco App, showcasing detailed screen layouts and navigation flow. These wireframes represent an intermediate stage of app design, incorporating refined user interface elements such as typography, icons, and layout structure.
1. Top Section:
• Screens for onboarding, account creation, login, and password recovery processes.
• Progression flow displayed using connecting lines to show user navigation paths.
2. Middle Section:
• Main dashboard screens featuring ‘Good Morning’ greetings, badges, resources, and personalized challenges.
• Navigation to content such as AR guides, eco-friendly resources, and settings.
3. Bottom Section:
• User action screens for selecting and completing challenges, joining carpool groups, and tracking progress.
• Interaction-focused screens for customizing routes, earning rewards, and participating in community-driven initiatives.
4. Design Layout:
• Consistent header and footer navigation bars across screens.
• Clear paths connecting the screens visually represent the user journey.

The wireframes provide a cohesive view of app functionality, emphasizing usability, clear navigation, and eco-conscious features.

User Testing Summary for BreatheEco App, highlighting insights from four different participants, including their background, habits, obstacles, rewards, and prioritized features.
1. User #1:
• Background: Office worker interested in reducing their carbon footprint.
• Tech Habits: Regular app user with moderate comfort with technology.
• Insights: Interested in real-time environmental alerts and sustainable transportation routes.
• Feature Priorities: Ranked most interested in real-time alerts, community engagement, and enhanced eco-routing.
2. User #2:
• Background: Professional promoting sustainability in personal and professional life.
• Tech Habits: Advanced tech user with preferences for seamless app integrations.
• Insights: Emphasized the importance of data on environmental impact and social sharing features.
• Feature Priorities: Prioritized smart device integration, advanced environmental data, and social group-sharing tools.
3. User #3:
• Background: Freelancer passionate about reducing environmental impact during daily activities.
• Tech Habits: Comfortable with app ecosystems and data-driven features.
• Insights: Highlighted the need for advanced mapping tools and local transport integration.
• Feature Priorities: Focused on mapping tools, local integration, and collaboration tools.
4. User #4:
• Background: Educator integrating sustainability into their curriculum and daily life.
• Tech Habits: Uses apps occasionally but prioritizes family-related sustainability.
• Insights: Favored group management features and educational tools for students.
• Feature Priorities: Group management, educational content, and real-time environmental data.

The testing highlights specific user needs and pain points, aiding in refining the app’s features and enhancing usability tailored to diverse lifestyles and priorities.

Two hardcover books placed on a wooden surface near a window with soft natural light streaming in. The book on the left features a modernist architectural design with red and white geometric elements, including windows and balconies, highlighted by yellow triangular accents. The book on the right has a minimalist cover with a large blue lowercase ‘b,’ a historical black-and-white photo, and a red square accent. A ceramic mug and a wooden mannequin hand are also visible, adding an artistic touch to the scene, with green leaves in the foreground for a natural aesthetic.

An open book displaying two pages with a clean and modern layout. The left page features a ‘Table of Contents’ titled in red, with sections such as ‘History,’ ‘Masters and Apprentices,’ and ‘Primary Forms,’ each followed by corresponding page numbers. The design is accented with geometric shapes: a red square, a yellow triangle, and a blue circle. The right page displays a black-and-white portrait of a person with hands on their temples. The image is overlaid with transparent yellow, red, and blue rectangles, creating a striking artistic effect. A minimal quote from Walter Gropius appears subtly above the image. The book has a red spine, adding to its modern design aesthetic.

An open book displaying two pages of a historical overview about the Bauhaus school. The left page features a bold red title reading ‘History’ with two vintage black-and-white photographs of Bauhaus buildings, each accompanied by captions describing the images. Below the photos, there is detailed text narrating the establishment of the Bauhaus, its goals, and its artistic vision.

The right page continues the historical narrative and includes a section titled ‘From The 1919 Program’ in red, followed by a quote in yellow highlighting Walter Gropius’s vision for creative collaboration. This page includes scanned images of historical documents and illustrations related to the Bauhaus, each explained in accompanying captions. The layout uses clean margins and structured text blocks, maintaining a professional and modern design aesthetic with accents in red, yellow, and black.

An open book showcasing two pages focused on the ‘Masters’ of the Bauhaus. The left page features a bold red title, ‘Masters,’ and a centered black-and-white group photograph of the Bauhaus founders and teachers, with names like Walter Gropius, Paul Klee, and Wassily Kandinsky labeled with diagonal lines pointing to their positions in the image. The layout is clean and modern, with geometric accents in blue and yellow dividing the sections.

The right page continues with a narrative about Walter Gropius and the prominent artists associated with the Bauhaus. A yellow rectangle highlights part of the text, adding visual hierarchy. Below the text are two black-and-white photographs: one of students looking up at the camera in an artistic composition, and the other featuring students working with wallpaper and decorative design elements. Captions accompany both images, providing historical context. The overall design emphasizes clarity and an organized presentation of historical content.

An open book with two pages highlighting the Bauhaus educational principles and student life.

The left page features a large black-and-white photograph of students in a Bauhaus workshop, casually gathered and engaging with one another. A yellow triangular overlay extends from the top, adding a modern visual element. Beside the image is a block of text quoting Walter Gropius: ‘Gropius’s ambition was nothing less than to forge a new type of artist.’ Additional descriptive text explains the vision of creating a ‘new guild of craftsmen’ and the inclusive, multidisciplinary approach of the Bauhaus.

The right page continues the narrative with a detailed explanation of Bauhaus education, emphasizing its diverse student body and collaborative ethos. At the top, a colorful hand-drawn diagram of a student schedule is displayed, with artistic and playful elements. Below it is a vintage illustration titled ‘Der Muster-Bauhäusler,’ featuring a whimsical figure representing the ideal Bauhaus student. The layout balances text and visuals, incorporating clean, geometric accents that reflect Bauhaus design principles.

An open book showcasing the principles and curriculum of the Bauhaus school.

The left page provides a detailed textual explanation of the Bauhaus educational structure, emphasizing Walter Gropius’s vision of blending artistic and practical disciplines. The text discusses the Preliminary Course as the foundation for Bauhaus education, with exercises focusing on color theory, material studies, and composition, supervised by renowned instructors such as Johannes Itten, László Moholy-Nagy, and Josef Albers.

The right page visually highlights the curriculum structure with a large graphic element: a bold, blue lowercase ‘b’ enclosing a circular diagram at its center. The diagram represents the Preliminary Course and Bauhaus curriculum layers, annotated with labels like ‘Color,’ ‘Form,’ and ‘Material.’ Accompanying the graphic, a yellow box contains captions detailing the diagram’s origin, attributed to Walter Gropius. Above the diagram, a minimalist quote from Gropius reads, ‘The school is the servant of the workshop,’ emphasizing the Bauhaus’s practical and collaborative ethos.

An open book spread discussing the concept of ‘Form and Color’ at the Bauhaus school.

The left page features a circular color wheel segmented into primary and secondary colors (red, yellow, blue, and green) alongside a description of Ludwig Hirschfeld-Mack’s ‘Color-Light Plays’ (Farben Licht-Spiele). The text highlights the artistic exploration of color and light, emphasizing their role in Bauhaus pedagogy. Below the text, there is an image of an original design for ‘Color-Light Plays,’ showcasing geometrical and textual elements.

The right page delves deeper into the theoretical and practical instruction of form and color, referencing courses taught by notable Bauhaus figures such as Johannes Itten, Vassily Kandinsky, and Paul Klee. Accompanying the text are three visual elements: a color triangle chart by Vassily Kandinsky, a detailed Bauhaus timetable illustrating its curriculum, and a portrait of one of the Bauhaus masters, reinforcing the school’s integration of art and analytical studies.

An open book spread focusing on the Bauhaus exploration of ‘Primary Forms.’

The left page features a circular Bauhaus emblem labeled ‘Primary Forms’ and accompanying text about dynamic elements in composition, guided by teachings from Kandinsky and Klee. Below the text, there are line drawings illustrating geometric relationships between shapes such as triangles, circles, and squares, reflecting exercises used in Bauhaus coursework to teach spatial and planar dynamics.

The right page dives deeper into the concept of ‘Subdividing the Square,’ showcasing various black-and-white grid patterns designed by Bauhaus students. The text elaborates on how these exercises explored proportion, rhythm, and surface tension, illustrating the division of squares into smaller contrasting elements. The page highlights the innovative methodologies employed to teach visual balance and contrast in design, alongside technical drawings and patterns.

An open book spread discussing ‘Spiral Studies’ and ‘Analytical Drawing’ in the context of Bauhaus education.

The left page features a section on ‘Spiral Studies,’ which explores the use of spirals to train students in progressive proportion relationships. A large geometric spiral diagram, annotated in red and blue lines, demonstrates radial and angular progressions. The accompanying text highlights the philosophical and visual significance of the spiral, as inspired by Kandinsky and Klee.

The right page focuses on ‘Analytical Drawing,’ a methodology used to teach students about the interaction of points, lines, and planes in everyday objects. A detailed diagram of a still-life composition, including geometric forms and extended lines, illustrates how students analyzed the structure and balance of objects. The text explains Kandinsky’s emphasis on understanding the natural and artistic laws behind compositions, bridging abstract art and analytical studies.

An open book spread featuring a detailed exploration of ‘Color’ as studied at the Bauhaus.

The left page introduces Johannes Itten’s reinterpretation of Philipp Otto Runge’s color sphere, focusing on dark-light polarities and concentric contrasts. A prominent star-shaped color diagram illustrates these principles, surrounded by explanatory text on Itten’s teaching methods and his emphasis on contrasts such as hue, light-dark, and warm-cool. Below the diagram, a color gradient chart is displayed, showing the progression of hues and shades.

The right page discusses Josef Albers’ theory of color relativity and contrasts it with Itten’s teachings. The section ‘Light and Dark’ emphasizes Albers’ perspective on studying color through interdependence and personal interpretation. Two visuals accompany the text: one depicting a color sphere and another showing a light-and-dark contrast composition by a Bauhaus student, featuring reflective and shadowed geometric forms. Both visuals underline the application of color theories in Bauhaus practices.

An open book spread focusing on ‘In Motion’ and ‘Analogy and Equilibrium’ within Bauhaus design principles.

The left page features a section titled ‘In Motion,’ which delves into Kandinsky’s exploration of the ‘basic plane’ (BP) and its relation to color and depth perception. Two images illustrate his theories: one with a blue square on a gray background and another with a red square on an orange background, emphasizing the push and pull effects of color interactions. The accompanying text explains exercises by Erich Mrozek, exploring the dynamic tension between form and color.

The right page is divided into ‘Analogy and Equilibrium’ and ‘Opacity and Transparency.’ It includes a watercolor exercise showing overlapping geometric shapes in primary and tertiary colors to demonstrate equilibrium. Below, a quote by Josef Albers highlights the subjectivity of color perception, followed by text explaining exercises in transparency and opacity using layered geometric forms. The concepts illustrate Albers’ emphasis on perceptual nuances in color relationships.

A modern book cover design showcasing the Bauhaus movement with a clean and geometric layout. The image displays three parts: the front cover, spine, and back cover, alongside an open book spread.

The front cover features a bold, oversized lowercase ‘b’ in blue on a white background, accompanied by a yellow triangle and a small red square. A black-and-white photograph of Bauhaus leaders and text provides historical context.

The spine has minimalistic elements, including the yellow triangle, the word ‘Taschen,’ and the title ‘Bauhaus.’

The back cover highlights a photograph of Bauhaus architecture with red geometric accents, emphasizing the style’s focus on modernist geometry and functionality.

Below, the open book reveals the same cohesive design elements, with the left page showing the blue ‘b’ and photograph, and the right page displaying architectural imagery with clean, minimal typography.

An open magazine spread featuring a modern, artistic layout with a black background. The left page highlights a male figure, identified as Finneas, seated at a white keyboard under a spotlight, accompanied by descriptive text detailing his contributions as a collaborator and songwriter.

The right page contrasts with a bold red ladder prop, where Billie Eilish, dressed in an all-red outfit, leans dynamically. Surrounding her are various typographic elements, including words like ‘Songwriter,’ ‘Electropop,’ ‘Bad Guy,’ ‘Sagittarius,’ and ‘California,’ visually emphasizing her identity and achievements. The overall design uses contrasting colors and dynamic visuals to create a dramatic and engaging aesthetic.

Magazine spread featuring a modern and artistic layout. The left page has a dark background with a small grayscale photograph of a seated person in a contemplative pose, captioned ‘Billie Eilish 2001.’ The right page displays a close-up, monochromatic portrait of Billie Eilish with an overlay of a blue triangular graphic on her face. The text reads ‘The New Edge of Seventeen,’ accompanied by her website URL (www.billieeilish.com) and her birthdate, ‘December 18, 2001.’ The design incorporates minimalist typography and vertical yellow and green lines for a dynamic visual effect.

Magazine spread featuring a dynamic design with Billie Eilish and her brother Finneas. The left page includes a photo of Finneas seated at a white piano, accompanied by a biographical text about his achievements as a songwriter and producer, with bold excerpts from a Variety interview. The right page shows Billie Eilish in a vibrant red outfit, striking a pose atop a red ladder. Surrounding her image are artistic text elements with words like ‘Songwriter,’ ‘Bad Guy,’ ‘Pop Superstar,’ and ‘Los Angeles,’ highlighting her identity and achievements. The layout employs a dark background with contrasting bright visuals and typography for a modern, edgy aesthetic.

Magazine spread featuring Billie Eilish performing on stage under dramatic lighting. The background showcases a blurred image of her face and bright beams of light, creating an ethereal atmosphere. Billie wears a vibrant yellow oversized shirt with graphic illustrations and holds a microphone while smiling. Bold typography overlays the image, with the words ‘Ocean Eyes’ in purple and ‘NO Fair’ in large white letters. The layout includes a detailed narrative about Billie Eilish’s breakout song ‘Ocean Eyes,’ its origins, and its journey to success, framed stylishly within the dynamic visuals.

Monochromatic magazine spread featuring Billie Eilish with a melancholic expression, her face partially obscured by wisps of hair. She wears a textured knit sweater and lace sleeves, adding depth to the composition. The headline reads ‘Don’t Smile at Me,’ referencing her 2017 EP. The accompanying text discusses her breakout success with singles like ‘Bellyache,’ ‘Copycat,’ and ‘My Boy,’ noting her dark yet danceable musical style. A tracklist from the EP is displayed in a minimalist overlay, adding to the modern and introspective tone of the design.

Magazine spread featuring Billie Eilish with a dramatic juxtaposition of two visuals. On the left, a haunting scene shows a woman with eerie white eyes crawling out from under a disheveled bed in a dimly lit room, evoking a chilling atmosphere. On the right, Billie Eilish is captured mid-performance, kneeling on stage while wearing a vibrant green and black outfit with matching headgear emblazoned with her name. The spread includes the headline ‘When We All Fall Asleep, Where Do We Go?’ alongside a subtitle ‘Bad Guy,’ describing her 2019 album’s unique style and theatrical sensibilities. A tracklist in various fonts cascades across the bottom, featuring songs like ‘Bury a Friend,’ ‘You Should See Me in a Crown,’ and ‘Bad Guy.’

My Expertise

Crafting impactful designs and seamless digital experiences in graphic design, UI/UX, and creative direction.

COMMUNICATION DESIGN

Packaging Design
Typography
social kit
Print Design

creative direction
Brand Strategy
Visual Identity Systems
Marketing Collaterals

UX/UI DESIGN

User Research
Interaction Design
Accessibility Design
Usability Testing

Wireframing
Prototyping
Mobile App Design
Web Design

CREATIVE DIRECTION

Campaign Development
Digital Advertising
Concept Development
Digital Campaign Strategy

Art Direction
Creative Leadership
Creative Problem-Solving
Team Collaboration

DEVELOPMENT & TOOLS

Figma
Adobe Creative Suite
Visual Identity Systems
Marketing Collaterals

HTML/CSS
No-Code Platforms
Wordpress
Print Design

Photoshop Illustrator Figma InDesign Substance 3D family Corel Draw After Effects Premiere Pro wordpress MAYA SLACK visual Studio code

ABOUT MOSTAFA

A versatile graphic and product designer with expertise in Branding, UI/UX Design, Motion Graphics, and Creative Direction. Mostafa specializes in creating innovative designs that bridge 19th-century art movements, Swiss minimalism, and modern American aesthetics.

Driven by a passion for impactful storytelling and functional design, Mostafa thrives on collaborating with teams and stakeholders to deliver seamless experiences across print, digital, and motion platforms.

Melody Picture LLC
Freelance
Tandis Designers Ltd.
Tehran Municipality
Printing house

2024 - Present
2020 - Present
07/2007 - 02/2020
10/2012 - 10/2019
05/2009 - 04/2010

Packaging design

Stealth

Concept Devolopment

Drake

Presentation slide showcasing the packaging design process for the HyperGear Stealth ANC earbuds. The layout includes a detailed flat design of the product’s packaging with labeled sections for branding, product specifications, and visuals of the earbuds. The bottom right corner displays a photo of assembled packaging boxes on a wooden surface. Text overlay reads ‘PACKAGING DESIGNING PRESENTATION’ in bold white font, emphasizing the focus of the presentation.

Creating a Master Carton for the HyperGear Brand

Introduction

As a graphic design student at California State University, Northridge (CSUN), with a background in visual design and various Adobe certifications, I am constantly seeking opportunities to apply my skills in practical, real-world projects. My recent endeavor involved designing a master carton for HyperGear's Stealth Pods ANC, a product known for its cutting-edge technology and sleek design. This project allowed me to blend my technical proficiency with creative insights to produce a packaging solution that is both functional and visually appealing. This design was specifically requested by a company as an assignment to demonstrate my skills during the job application process.

Minimalist flat die-line template for packaging design. The outline showcases the structural layout of a box with foldable flaps and panels, designed to form a 3D package. The red line defines the cutting edges, and the blank interior allows for customizable design elements.

Design Concept and Objectives

The primary objective of the master carton design was to create a packaging solution that effectively protects the product while enhancing its shelf appeal. Given the competitive nature of the consumer electronics market, the design needed to reflect the high quality and advanced features of the Stealth Pods ANC. The design also had to adhere to specific dimensions and structural requirements to meet practical shipping and display needs.

Flat die-line template of a master carton with detailed dimensions labeled in millimeters. The layout includes panels for the rear, left side, front, and right side, along with foldable flaps. Orange outlines indicate the cut lines, while dotted lines signify fold lines, providing a clear guide for constructing the 3D packaging

Technical Specifications

The master carton was designed with precise dimensions: a length of 587 mm, a height of 327 mm, and a width of 400 mm. These dimensions were crucial in ensuring that the carton could securely accommodate multiple units of the Stealth Pods ANC. The design process involved creating a detailed die-cut layout that specified the positions of various panels and flaps, ensuring ease of assembly and structural integrity.

Visual Design Elements

The brand identity of HyperGear drove the visual design of the master carton. Key elements included: Brand Colors and Logo: HyperGear's signature orange and white colors, along with the prominently displayed logo, ensure brand consistency and recognition. Product Imagery: High-quality images of the Stealth Pods ANC were included on the front and side panels, showcasing the product's sleek design and key features. Informational Graphics: Icons and text were strategically placed to highlight important product features, such as active noise canceling, Bluetooth compatibility, and up to 28 hours of playtime. Clean and Modern Layout: The overall layout was clean and modern, with ample white space to avoid clutter and enhance readability.

Software and Tools

The design was created using Adobe Illustrator, leveraging my expertise in this software to produce a professional and precise layout. The die-cut design involved careful planning and attention to detail to ensure that all elements aligned correctly and the final product was both functional and aesthetically pleasing.

Adobe software interface displaying a 3D mockup of HyperGear Stealth Pods ANC packaging design. The workspace showcases three product boxes arranged on a wooden table, with realistic lighting and shadows in front of a blurred window background. The left panel features design elements and tools, while the right panel shows properties and object layers. The central canvas provides a detailed preview of the packaging design in a photorealistic setting.

Challenges and Solutions

One of the key challenges was ensuring that the design was not only visually appealing but also practical from a manufacturing standpoint. This required close collaboration with the production team to understand the limitations and capabilities of the printing and cutting processes. Adjustments were made to the design to optimize it for efficient production while maintaining the intended aesthetic.

Conclusion

The master carton design for HyperGear's Stealth Pods ANC represents a successful integration of technical skills and creative design. By focusing on both the practical and visual aspects of the packaging, I was able to create a solution that enhances the product's marketability and ensures its protection during shipping and handling. This project not only showcases my capabilities as a graphic designer but also highlights the importance of thoughtful and strategic design in creating effective packaging solutions. This assignment, requested by a company, was a valuable opportunity to demonstrate my skills and creativity in a professional context.

All credit and rights to the 3D picture of the product, logo, brand name, and color swatch used in this design are the property of the HyperGear brand. The inclusion of these elements in this project is intended solely for the purpose of showcasing my design skills and is used with respect for HyperGear's intellectual property rights.