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.

Here is the visual mockup for the hover state of the UI elements:

- Primary Button Hover State: The background color brightness has been increased (from Teal to a brighter Teal), and a subtle drop shadow has been added for better visual feedback when the button is hovered over.

Here is the visual mockup for the "Components and Reusability" section of the JadiProMedia Design System:

- Service Card Example: A card with a Light Gray background, a title ("Website Creation"), a brief description, and a "Learn More" button with a Teal background. A hover effect example is also included, where the card's background changes to Teal.

- Testimonial Carousel Example: A quote with a Mid Gray background, the testimonial in Mid Gray text, and the client's name in Teal for emphasis.

- Call to Action (CTA) Block Example: A full-width Orange block with a bold, encouraging message ("Get Started with JadiProMedia Today!") in white text.

These mockups demonstrate the consistent and reusable components across the JadiProMedia website. Let me know if you need any further modifications or additional components!

#JadiProMedia #website #design #system #desain

Here is the visual mockup for the "Animations and Interactions" section of the JadiProMedia Design System:

- Button Hover Effect: Shows the original button and its hover state with a slight increase in size and increased brightness for visual feedback.
- Image Hover Effect: Demonstrates a slow zoom-in effect when an image is hovered over to create a dynamic visual.
- Scroll Animation: Illustrates a fade-in effect for a service section as users scroll down, with an arrow indicating the animation direction.
- Call-to-Action Button Slide-In: Demonstrates a slide-in animation for a CTA button, emphasizing its importance as users scroll.

https://b12.io/gpt/s/?sn=Bf2RN8s
https://b12.io/gpt/bugreport

#contoh #desain #website #sample #example

Poppins
Poppins

#font #style #face

Here is the visual mockup for the "Accessibility" section of the JadiProMedia Design System:

- Color Contrast Example: Demonstrates high contrast text (Dark Blue on Light Gray) to maintain readability and a low contrast example (for illustrative purposes) showing the importance of meeting contrast standards.
- Keyboard Navigation: Shows an interactive button that is accessible via the keyboard using the "Tab" key, highlighting the importance of keyboard navigation for usability.
- ARIA Roles: Demonstrates a form element with an ARIA role (aria-labelledby) to ensure screen reader compatibility, aiding visually impaired users in understanding the page structure.

Here is the updated visual mockup for "Responsive Design Considerations" for the JadiProMedia Design System:

- Mobile First Approach: A layout that focuses on compatibility with smaller screens first, then scales up for larger devices like tablets and desktops.
- Navigation for Mobile: Shows a simplified navigation bar with a hamburger menu, suitable for mobile view.
- Responsive Images: Illustrates an image that scales based on container width, maintaining responsiveness.
- Tablet and Desktop Layouts: Different layout approaches for tablets (wider but still mobile-friendly) and desktops (full-width, expansive layout).
- Text and Button Sizes: Ensures that text is readable (16px+), and buttons are large enough for easy tapping, enhancing accessibility.