3. Use and Reuse Components:
- Designers use the predefined components in the design system to create wireframes, prototypes, or entire product designs.
- Developers can reference the system to ensure that the built UI matches the design specifications.

4. Collaborate and Update:
- The design system is updated centrally in Penpot.
- Whenever there is a change in any component, the changes are propagated throughout the projects using that component, keeping everything consistent and up to date.

### Summary

A Penpot Design System is an organized library of reusable UI components, styles, design tokens, and guidelines that can be used across multiple projects to ensure consistency, efficiency, and scalability. It helps create a consistent user experience by reusing visual components and collaborating effectively between designers and developers.

Penpot, being an open-source and web-based design tool, makes it easy for teams to create, update, and collaborate on design systems, making it particularly valuable for projects that require cross-functional input.

#penpot #design #system #desain #sistem

A design system on a global scale is a collection of reusable components, standards, and guidelines that ensure consistency in design and branding across various digital products or platforms within an organization. It typically includes UI elements, typography, color schemes, and best practices for both designers and developers. A global design system aims to provide cohesion across multiple teams, regions, or products, ensuring that everything aligns visually and functionally, no matter where it's developed or by whom. It helps large organizations maintain brand consistency and improve design efficiency worldwide.

#global #design #system #desain #sistem

https://penpot.app/blog/penpot-for-design-systems-101/

#desain #design #system #penpot

https://www.youtube.com/live/aW0LNHLEI_Y?si=h5_Dzyt_l8ARMMn4

---

# Penpot 2.0 Ins and Outs and What's Coming Next
Time Interval: 00:00:00 – 01:05:24

## Summary
- 🎉 Penpot 2.0 Introduction: The video opens with a discussion on the launch of Penpot 2.0, marking a significant upgrade for this open-source design and prototyping tool.
- 🚀 Release Announcement: Penpot 2.0 was officially announced on April 9, 2023, with improvements like SAS deployment and on-premise Docker images.
- 🌍 Community Support: The team reflects on the enthusiastic feedback they received, noting that the community’s love and support helped drive Penpot’s success.
- 📊 Post-Launch Metrics: Following the launch, Penpot observed a surge in signups, particularly after Adobe's acquisition of Figma in September 2022. This spike in users reflected Penpot's increasing relevance in the design community.
- 🧑‍💻 Collaboration Ratios: The ratio of designers to developers is highlighted as a unique metric, with Penpot striving to reach a 1.5:1 developer-to-designer ratio, facilitating a better collaboration between both groups.
- 🔧 Penpot 2.0 Features: Key new features include advanced UI changes, such as reduced file update events, enabling more efficient workflows.
- 🛠 Next Roadmap: Future developments include the integration of design tokens, a Figma-to-Penpot migration tool, plugin support, and continued performance improvements.
- 🎬 Demos: The video provides live demos, showcasing Penpot’s ability to streamline workflows, highlighting layouts, and demonstrating how Penpot helps with Figma migration.

## Detailed Breakdown of Each Section:

### 1. Introduction and Launch of Penpot 2.0 (00:00:00 – 00:04:10)
- The video starts with an exciting introduction to Penpot 2.0, emphasizing its milestone significance.
- The official release date, April 9th, 2023, is discussed as the time when the tool was made widely available.
- This section also highlights the availability of SAS deployment and Docker images for self-hosting, catering to a range of team needs.

### 2. Community and Feedback (00:04:10 – 00:09:50)
- The Penpot team expresses gratitude for the support they received from their community.
- They note that both before and after the 2.0 launch, there was a strong show of enthusiasm from users who valued open-source tools.
- The discussion turns to how the Figma acquisition by Adobe led to a massive marketing opportunity for Penpot, as many designers began exploring alternative platforms.

### 3. Metrics and User Growth (00:09:50 – 00:19:18)
- This section covers various performance metrics post-launch, particularly focusing on how Penpot organically grew in signups following the Figma acquisition.
- The team discusses the significance of their developer-to-designer collaboration ratio, which they believe enhances Penpot’s unique positioning in the design space.
- A significant milestone achieved was reaching a 1.49:1 designer-to-developer ratio during the Penpot 2.0 release week.

### 4. Penpot 2.0 Features and Improvements (00:19:18 – 00:35:00)
- Detailed explanations of new features in Penpot 2.0 are given, such as advanced UI updates, improved layouts, and reduced file update events by approximately 35-40%.
- These features streamline user workflows and reduce the effort required to complete tasks, making the tool more efficient and responsive.

### 5. Next Steps for Penpot and Roadmap (00:35:00 – 00:53:00)
- This section delves into what’s next for Penpot. Future initiatives include support for design tokens, which store design decisions like fonts and colors in a central location for easier management.
- Plugin support will allow users to extend Penpot’s capabilities through third-party plugins.
- A migration tool is also in the works to help users transition their designs from Figma to Penpot.

### 6. Live Demos (00:53:00 – 01:05:24)
- Several live demos demonstrate Penpot’s new features in action.
- The demos show how users can import Figma files into Penpot, work with complex layouts, and make use of the improved UI.
- These demos highlight Penpot’s potential to simplify design processes and boost team productivity.

## Insights Based on Numbers
- 1.49 Designer-to-Developer Ratio: A key metric discussed in the video, showing how Penpot encourages collaboration between developers and designers.
- April 9th, 2023: The official launch date of Penpot 2.0, marking a significant moment in the project’s development.
- 20 Billion Marketing Impact: The acquisition of Figma by Adobe led to increased awareness of Penpot as a competitive alternative, driving user interest and adoption.

## Example Exploratory Questions
1. How did the acquisition of Figma by Adobe affect Penpot’s growth and user adoption? (*Enter E1 to ask*)
2. What were the major performance improvements introduced in Penpot 2.0? (*Enter E2 to ask*)
3. How does Penpot 2.0 foster collaboration between designers and developers? (*Enter E3 to ask*)

## Commands
- [A] Write an educational article
- [D] Create conclusion diagram
- [T] Assess my knowledge of the video through a multiple-choice quiz
- [I] Indicate timestamps

#summary #video #penpot

https://originalplugins.com/product/oxygen-builder/

#oxygen #original #builder #lisensi #key

https://medium.com/@OriginalPlugins

#oxygen #original #builder #lisensi #key

https://originalplugins.com/how-to-give-100-safe-access-with-restricted-permissions/

#wp #wordpress #safe #aman #plugin

https://swissdesign.systems/
https://swissdesign.systems/design-system-examples.html

#swiss #design #desain #system #example #sample #koleksi #collection

https://dribbble.com/tags/swiss

#inspirasi #swiss #desain #dribbble

https://dribbble.com/tags/swiss-style

#inspirasi #swiss #desain #dribbble #style

https://bold.bridge.ufsc.br/en/

#bold #design #system #desain #sistem #example #sample

JadiProMedia Website Design System

### 1. Brand Identity and Theme

- Logo Concept:
- The logo incorporates three key elements:
- A circle or checkmark symbolizing achievement and realization.
- A vertical line or rectangle for professionalism.
- An abstract triangle or digital pixel element to represent media and creativity.
- Color Usage:
- Circle: Dark Blue (#1D3557)
- Vertical Line: Black (#000000)
- Abstract Media Element: Teal (#00B4D8) or Orange (#FF6B35)

- Slogan:
- "Coba-Bikin-Jadi" - It communicates the idea of experimenting, building, and achieving.

- Design Model: Swiss Design model (clean, minimalist, grid-based layouts).


### 2. Color Palette

- Primary Colors:
- Dark Blue (#1D3557): Represents professionalism, trust, and reliability.
- Black (#000000): Indicates precision and authority.

- Accent Colors:
- Teal (#00B4D8): Symbolizes creativity, innovation, communication, and modernity.
- Orange (#FF6B35): Represents creativity, enthusiasm, and energy.

- Neutral Colors:
- Light Gray (#F0F0F0): Used for backgrounds or secondary elements to maintain clarity.
- Mid Gray (#A8A8A8): Balances the color scheme and provides subtle contrast.


### 3. Typography

- Primary Typeface:
- Helvetica Neue (Sans-serif) - Clean, minimalist, ideal for a modern, professional look. Suitable for headings and subheadings.

- Secondary Typeface:
- Roboto (Sans-serif) - A complementary typeface for body text, easy readability for paragraphs, descriptions, and forms.

- Font Hierarchy:
- H1 (Main Headings): 42px, Bold, Dark Blue
- H2 (Subheadings): 32px, Semi-Bold, Black
- Body Text: 16px, Regular, Mid Gray
- Buttons/CTAs: 18px, Bold, White on Teal or Orange Background


### 4. Grid System and Layout

- Grid System:
- Based on a 12-column grid, allowing for flexibility in content layout.
- Spacing between columns: 24px

- Container Width:
- Desktop: Max width of 1200px.
- Tablet: 900px.
- Mobile: 100% width with adequate padding (16px).

- Section Heights:
- Use modular scaling to ensure consistency. Base section height starts at 500px and scales up or down in increments of 250px.


### 5. UI Elements

- Buttons:
- Primary Buttons: Rounded edges, background in Teal (#00B4D8) or Orange (#FF6B35), text in White.
- Secondary Buttons: Outline style with Dark Blue border and text, transparent background.
- Hover State: Increase brightness of background color and add a subtle drop shadow.

- Forms:
- Input Fields: Rounded corners, Light Gray background (#F0F0F0), Dark Blue text.
- Labels: Uppercase, Roboto, Mid Gray text.
- Error State: Border color changes to Red with an error message below the field.

- Navigation Bar:
- Sticky Header: Positioned at the top, Dark Blue background with White links.
- Mobile Menu: Hamburger icon collapses into a full-screen teal overlay with orange link hover.


### 6. Imagery and Iconography

- Imagery:
- Use high-quality imagery that reflects professionalism, achievement, and creativity.
- Images should use vibrant colors where appropriate but be consistent with the brand tone (mainly blues, blacks, and creative accents).
- Example Concepts for Each Service:
- Website Creation: Devices showing responsive designs.
- Content Writing: Writers working, overlayed with website text elements.
- Magazine Creation: Digital and print layouts.
- Yearbook: Opened hardcover with milestone images.
- Company Profile: Company booklet design.
- Video Production: Behind-the-scenes filming.

- Icons:
- Use simple, flat icons that fit into the Swiss design style.
- Icons to visually represent sections like services, features, contact, and achievements.


### 7. Components and Reusability

- Cards:
- Service Cards: Each service should have a consistent card style with an image, title, brief description, and "Learn More" button.
- Background in Light Gray (#F0F0F0) with a Teal or Orange hover effect.

- Testimonials:
- Carousel with client quotes.
- Use Mid Gray for quotes and Teal for client names to stand out.

- Call to Action (CTA) Blocks:
- CTA Blocks at strategic positions (home page, after each service): Full-width with a Teal or Orange background, encouraging users to "Get Started" or "Contact Us".


### 8. Animations and Interactions

- Hover Effects:
- Buttons: Slight grow-in size and increase brightness to provide visual feedback.
- Images: Slow zoom-in effect on hover to create dynamic visuals.

- Scroll Animation:
- Subtle fade-in effects for service sections as users scroll down.
- Emphasize important elements like headings and call-to-action buttons with animations on scroll (e.g., slide-in from the sides).


### 9. Accessibility

- Color Contrast: Ensure all text elements have a contrast ratio of 4.5:1 to maintain readability.
- Keyboard Navigation: All interactive elements (buttons, forms, links) should be fully accessible via keyboard.
- ARIA Roles: Use appropriate ARIA roles for elements to ensure screen reader compatibility.


### 10. Responsive Design Considerations

- Mobile First Approach:
- Start with mobile-friendly layouts, then scale up for tablet and desktop.

- Navigation:
- On mobile, simplify the navigation bar to an expandable hamburger menu.
- All images should be responsive, scaling according to container width.

- Text and Button Sizes:
- Ensure that text is readable without zooming on smaller devices.
- Buttons should be large enough for easy tapping.

---

### Summary

The JadiProMedia website will use a clean, minimalist Swiss Design aesthetic that emphasizes professionalism, creativity, and reliability. The structured design system guides the use of color, typography, imagery, and interactions to ensure consistent and impactful communication of your brand values.

Would you like me to expand on any part of the design system or create mockups for specific pages?

#JadiProMedia #website #design #system

Here is the visual mockup for the "Brand Identity and Theme" of JadiProMedia Design System, including:

- Logo Concept: Featuring the circle (achievement), vertical line (professionalism), and triangle (creativity).
- Slogan: "Coba-Bikin-Jadi" to convey the brand's core message.
- Color Palette: Showcasing the primary, accent, and neutral colors used in the design system.
- Typography: Demonstrating the main typefaces, "Helvetica Neue" for headings and "Roboto" for body text.

#JadiProMedia #website #design #system #desain #sistem

Here is the visual mockup for the typography of the JadiProMedia branding guide, which includes:

- H1 - Main Heading: Displayed in "Helvetica Neue" with a bold style and Dark Blue color.
- H2 - Subheading: Displayed in "Helvetica Neue" with a semi-bold style and Black color.
- Body Text Example: Displayed in "Roboto" with normal weight and Mid Gray color.
- Button/CTA Text: Bold, with a Teal background to showcase its prominence.

This mockup visually communicates the different text styles used across the brand. Let me know if you need further adjustments or additional mockups!

Here is the visual mockup for the "Grid System and Layout" of the JadiProMedia design system, which includes:

- A 12-column grid system for flexibility in content layout.
- Columns are represented with light gray background and dark blue outlines.
- The container outline represents the maximum width for a desktop view (1200px).

This mockup visually communicates how the grid system is structured for consistent and responsive design. Let me know if you need additional mockups or more details on any part of the system!

#JadiProMedia #website #design #system #desain #sistem

Here is the modified mockup for the UI Elements of the JadiProMedia Design System, which includes:

- Primary Buttons: Rounded edges with either a Teal or Orange background, and white text.
- Secondary Buttons: Rounded edges with a Dark Blue border and text, transparent background.
- Input Fields: Rounded corners with a Light Gray background and Dark Blue text.
- Error State Input Field: Rounded corners with a Red border and error message below.
- Labels: Form labels in uppercase, Roboto font, and Mid Gray text.
- Navigation Bar: Sticky header in Dark Blue with White links.
- Mobile Menu (Hamburger Icon): Three horizontal lines in Teal to represent a collapsible menu.
- CTA Block: Full-width section with an Orange background and a call-to-action message in bold white text.