עזרה | עזרה איך ליצור נגן וידאו בעיצוב דומה ליוטיוב אחד לאחד?
-
באתר שלי אני מנסה ליצור נגן וידאו עם ממשק בעיצוב כמה שיותר דומה לממשק של נגן YouTube שבתמונה המצורפת. ניסיתי לבנות את זה לבד, אבל התוצאה לא יוצאת מספיק טובה מבחינת המראה, הפרופורציות, הכפתורים והתחושה הכללית.
מה שאני רוצה הוא:
ממשק נגן מודרני ונקי, בסגנון של YouTube
סרגל תחתון מסודר ויפה
כפתורי שליטה שנראים מקצועיים
פריסה, ריווחים ואייקונים שירגישו כמו בדוגמה שבתמונה
התאמה טובה גם למחשב וגם לניידהתמונה הראשונה מראה את המצב הנוכחי שלי.
התמונה השנייה מראה את הסגנון שאליו אני רוצה להגיע.אשמח לעזרה איך לשפר את ה-UI כך שהתוצאה תהיה כמה שיותר קרובה לדוגמה שבתמונה.
-
באתר שלי אני מנסה ליצור נגן וידאו עם ממשק בעיצוב כמה שיותר דומה לממשק של נגן YouTube שבתמונה המצורפת. ניסיתי לבנות את זה לבד, אבל התוצאה לא יוצאת מספיק טובה מבחינת המראה, הפרופורציות, הכפתורים והתחושה הכללית.
מה שאני רוצה הוא:
ממשק נגן מודרני ונקי, בסגנון של YouTube
סרגל תחתון מסודר ויפה
כפתורי שליטה שנראים מקצועיים
פריסה, ריווחים ואייקונים שירגישו כמו בדוגמה שבתמונה
התאמה טובה גם למחשב וגם לניידהתמונה הראשונה מראה את המצב הנוכחי שלי.
התמונה השנייה מראה את הסגנון שאליו אני רוצה להגיע.אשמח לעזרה איך לשפר את ה-UI כך שהתוצאה תהיה כמה שיותר קרובה לדוגמה שבתמונה.
@yehokarpel קשה לי להאמין שמישהו כאן יתן לך מידע מדוייק. כי אין איזה "ספריית עיצוב" של יוטיוב. הכי טוב זה שתשאל AI , כי הוא יכול לייצר לך במקום את ה SVG של הסמלים, וכל מה שאתה צריך.
תתעקש על כל פרט ותמחיש לו עם תמונות וסימונים, זה יצא הכי מדוייק שאפשר.
ובגדול - כל הכבוד! הגעת לעיצוב מאד דומה!
עבדת עם AI? Webflow? -
באתר שלי אני מנסה ליצור נגן וידאו עם ממשק בעיצוב כמה שיותר דומה לממשק של נגן YouTube שבתמונה המצורפת. ניסיתי לבנות את זה לבד, אבל התוצאה לא יוצאת מספיק טובה מבחינת המראה, הפרופורציות, הכפתורים והתחושה הכללית.
מה שאני רוצה הוא:
ממשק נגן מודרני ונקי, בסגנון של YouTube
סרגל תחתון מסודר ויפה
כפתורי שליטה שנראים מקצועיים
פריסה, ריווחים ואייקונים שירגישו כמו בדוגמה שבתמונה
התאמה טובה גם למחשב וגם לניידהתמונה הראשונה מראה את המצב הנוכחי שלי.
התמונה השנייה מראה את הסגנון שאליו אני רוצה להגיע.אשמח לעזרה איך לשפר את ה-UI כך שהתוצאה תהיה כמה שיותר קרובה לדוגמה שבתמונה.
-
@yehokarpel קשה לי להאמין שמישהו כאן יתן לך מידע מדוייק. כי אין איזה "ספריית עיצוב" של יוטיוב. הכי טוב זה שתשאל AI , כי הוא יכול לייצר לך במקום את ה SVG של הסמלים, וכל מה שאתה צריך.
תתעקש על כל פרט ותמחיש לו עם תמונות וסימונים, זה יצא הכי מדוייק שאפשר.
ובגדול - כל הכבוד! הגעת לעיצוב מאד דומה!
עבדת עם AI? Webflow?@mps גוגול ai סטודיו
-
@mps גוגול ai סטודיו
@yehokarpel נו אז מצוין, תמשיך, תשתמש בpro תמיד, ותעלה לו תמונות מדוייקות של הסמלים, תבקש "בדיוק ככה" ואחרי כך שיתאים את הגודל.
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}