DESIGN PROTOTYPES · JUNE 2026 · ROUND 8

וייב קוד ניוז —
46 כיוונים לעיצוב מחדש

ארבעים ושישה כיווני עיצוב עצמאיים לאתר החדשות הישראלי על Vibe Coding ובינה מלאכותית. הסבב האחרון (37–46) — עשרה מנגנונים מקוריים סביב פלטה חומה אחת, כל אחד עם "וואו" משלו, וכולם אתר חדשות מתפקד.

יוני 2026 · vibe-code-news.pages.dev חזרה לאתר הראשי ↓ הסבב החדש — 10 מנגנונים מקוריים (37–46)
01 — FOLIO
פוליו

עיתון דפוס שבועי בפורמט דיגיטלי — טיפוגרפיה קלאסית, עמודות, רדקשן ידני. לקורא שמעריך עומק.

ivory · ink · oxblood
לצפייה ←
02 — KINETIC
קינטי

מוציונס, אנימציות גיאומטריות, לטרים שמורפים. העיצוב עצמו הוא התוכן — לגרסה שחושבת בתנועה.

off-white · black · Klein blue
לצפייה ←
03 — NEWSROOM
שולחן המערכת

חדר חדשות אמיתי: פינים, פתקים, קירות תוכן, מבזקים בזמן אמת. לקורא שרוצה לחיות בתוך הסיפור.

paper · mustard · sage
לצפייה ←
04 — GALLERY
הגלריה

חלל תצוגה: כל מאמר הוא עבודה ממוסגרת. אור, צל, מרחק בין יצירות. לקורא שהניוז הוא גם אמנות.

charcoal · ivory · bronze
לצפייה ←
05 — SOLARI
הלוח

לוח יציאות מכני של תחנת רכבת ישנה: אותיות מתהפכות, רציפים, שעון תחנה. כל מבזק — רכבת שיוצאת.

hall · flap · brass
לצפייה ←
06 — OBSERVATORY
המצפה

אטלס שמיים של אסטרונום: המאמרים הם כוכבים בקבוצה אחת, החדשות — אפמריס יומי. תצפית, לא גלילה.

indigo · starlight · brass
לצפייה ←
07 — ATLAS
האטלס

יומן מסע של קרטוגרף: קווי גובה, מסלול אדום מקווקו בין הכתבות, חותמות ומברקים מהשטח. הקריאה היא המסע.

paper · sepia · expedition red
לצפייה ←
08 — TRANSIT
הקו

דיאגרמת מטרו מודרניסטית: כל קטגוריה קו צבעוני, כל כתבה תחנה, מבזק = שיבוש בקו. שילוט נקי, דיוק שוויצרי.

white · ink · line colors
לצפייה ←
09 — EDITOR
העורך

עורך קוד = עורך חדשות. המגזין הוא ה-IDE שבו הוא נכתב: פרומפט שמקליד את עצמו, כתבות כקבצים, חדשות כ-git log. וייב קודינג טהור, בלי ניאון.

graphite · parchment · syntax
לצפייה ←
10 — MACHINE
חדר המכונות

ההפך הגמור מ-AI: ברזל, פליז ומומנט. גלגלי שיניים משתלבים, בוכנה, מסוע כותרות ומדי לחץ. החדשות מיוצרות פיזית — קטלוג מכונות שוויצרי, 1935.

iron · dial cream · brass · copper
לצפייה ←
11 — ORIGAMI
אוריגמי

ממשק תלת-ממדי מקופל נייר — אזורים מתקפלים ונפתחים עם הגלילה, כרטיסיות שמתהפכות וחושפות תוכן. שקיפות, צל ועומק פיזי.

paper · ink · terracotta
לצפייה ←
12 — LIQUID GLASS
זכוכית נוזלית

רקע WebGL נוזלי שמגיב לעכבר, עם פאנלי זכוכית אטומה צפים מעליו. בלור, שקיפות וזוהר חמים בכל רבד.

petrol · gold · cream
לצפייה ←
13 — CONSTELLATION
מפת כוכבים

מפת כוכבים אינטראקטיבית — מאמרים כצמתים מוארים בגרף כוח, קווים מחברים סיפורים קשורים. מצלמה טסה בין כוכבים עם הגלילה.

midnight · starlight · nebula
לצפייה ←
14 — RISOGRAPH
דפוס ריזו

אסתטיקה של בית דפוס: טקסטורות הלפטון, צבעי יתר, סימני רישום והדמסה. כל חומר נחתם על הדף באנימציית החתמה. הדפסה פיזית, לא דיגיטלית.

cream · coral · federal blue · flour
לצפייה ←
15 — TACTILE PHYSICS
פיזיקה מוחשית

פריסה מבוססת פיזיקה — כרטיסים נופלים, מתערמים וקופצים במשקל אמיתי עם Matter.js. גרירה, התנגשות ומגנטיות. בטון, חומר וכובד.

concrete · orange · off-white · charcoal
לצפייה ←
16 — CINEMA
קולנוע

האתר הוא סרט אנכי — גלילה מקדמת סצנות, כותרות קולנועיות, פסי אותיות מתהפכים וטיקר "כעת מוקרן".

velvet · gold · ivory
לצפייה ←
17 — BAUHAUS
באוהאוס

גיאומטריה מופשטת, צבעי יסוד על נייר, רשת אסימטרית של עיגולים ריבועים ומשולשים. חיתוך חד, ללא המסה.

red · yellow · blue · black
לצפייה ←
18 — MIRROR
מראה

טיפוגרפיה עיתונאית: כותרות ענק שמשתקפות ומתעקלות בגלילה. רחף על מילה — חלונית צדדית נפתחת עם מאמרים קשורים.

black · white · signal red
לצפייה ←
19 — PUZZLE
פאזל

אינטראקציה של גרירה והרכבה: חתיכות תוכן מפוזרות — גוררים, מצמידים, "השלמה" פותחת את המאמר. פאסטלים רכים, קו מתאר שחור עבה.

peach · mint · lavender · butter · sky
לצפייה ←
20 — CARTOGRAPHER
מפה

מפת עולם מאוירת עם נקודות חמות לפי אזור — לחיצה על נקודה חושפת חדשות מאותו מיקום. אסתטיקה של אטלס קלאסי, מצפן מסתובב.

parchment · ink · vermilion
לצפייה ←
21 — OS
מערכת הפעלה

פורמט: האתר הוא מערכת הפעלה של ממש. חלונות צפים שניתן לגרור, למזער ולסגור. הקורא בונה את שולחן העבודה שלו — התוכן חי בחלונות נפרדים.

desktop · window · traffic light blue
לצפייה ←
22 — CARDS
חפיסת קלפים

פורמט: קלף אחד במסך מלא, בלי גריד ובלי רשימות. החלקה ימינה = שמור, שמאלה = דלג, למעלה = פתח מאמר. אינטראקציה של החלקה, לא גלילה.

paper · swipe rose · ink
לצפייה ←
23 — TERMINAL
טרמינל

פורמט: האתר הוא חלון טרמינל שחור-ירוק. ניווט אך ורק בפקודות מוקלדות (:news, :article 3, :chat). אין כפתורים, אין ריחוף — רק קלט-פלט טקסט.

black · phosphor · amber
לצפייה ←
24 — WAVEFORM
גל קול

פורמט: התוכן מוצג כגל קול על ציר זמן. כל מאמר הוא מקטע גל — לחיצה מפעילה קריינות (TTS) של אותו סיכום. עין רואה גל, אוזן שומעת חדשות.

midnight · waveform · breaking red
לצפייה ←
25 — BENTO
בנטו מוחלט

פורמט: מסך אחד ענק ללא גלילה, 50+ אריחים בגדלים שונים שממלאים כל פיקסל. ריחוף פותח תצוגה מקדימה — צפיפות מידע קיצונית, בלי "עמודים" במובן המסורתי.

cream · sage · blue · peach · ink
לצפייה ←
26 — SPLIT-READER
מפצל

מבנה: שני טורים חיים. רשימת מאמרים נגללת משמאל, תוכן המאמר הנבחר נטען מימין בלחיצה. צ'אט צף למעלה במרכז.

paper · ink · sage
לצפייה ←
27 — INFINITE-MARQUEE
מרקע

מבנה: נחלים אופקיים. כל קטגוריה היא נחל זורם במהירות שונה. עצירה בריחוף, הרחבה בלחיצה. צ'אט פס עליון מלא.

slate · electric blue · warm gold
לצפייה ←
28 — STORY-STREAM
סטורי

מבנה: כרטיסים אנכיים בגובה מסך מלא. כל סיפור — תמונה, כותרת, תקציר. החלקה למעלה = סיפור הבא. צ'אט צף עם תגובות.

midnight · lilac · reaction coral
לצפייה ←
29 — SIDE-BY-SIDE
זוגי

מבנה: שני טורים זה-לצד-זה. כל מאמר מוצג בעברית ובתרגום/תקציר באנגלית במקביל. צ'אט עליון עם מתג שפה HE/EN.

parchment · ink · accent red
לצפייה ←
30 — NEWSROOM-WALL
מערכת חדשות

מבנה: הדף הוא חדר מערכת. כל שולחן/כתב הוא עמודה נפרדת עם פתקי סטיקי. חותמות 'פורסם הרגע' בזמן אמת. צ'אט עליון עם אזכורי כתבים.

paper · ink · desk brass
לצפייה ←
31 — TIME-MACHINE
מכונת זמן

מבנה: היום בצד שמאל, ארכיון בימין. מחוון תאריך בתחתית — גרירה משנה את כל העמוד. ימים ישנים בספיה, היום בצבע מלא.

today · sepia · archive
לצפייה ←
32 — LIBRARY-STACKS
ספרייה

מבנה: קטגוריות הן מדפי עץ, מאמרים הם שדרות ספרים. גרירת שדרה שולפת את המאמר לקריאה. החזרה מחזירה למדף. צ'אט עליון כשולחן ספרן.

wood · leather · paper
לצפייה ←
33 — RADIO-DIAL
רדיו

מבנה: האתר הוא מכשיר רדיו. כל תדר = קטגוריה. סיבוב החוגה מחליף את התוכן. לחיצה על תדר פותחת מאמר. צ'אט עליון כרשת רמקול.

cabinet · amber · dial cream
לצפייה ←
34 — NEWSPAPER-FOLD
עיתון

מבנה: הדף הוא עיתון מקופל. דף הבית = השער המקופל. לחיצה פותחת לעמודים פנימיים. רשת עיתונות — טורים, כותרות, חתימות. צ'אט עליון כיומן מערכת.

newsprint · ink · spot red
לצפייה ←
35 — CODE-BLOCK
קוד

מבנה: חדשות כמו קובץ קוד. מונוספייס, מספרי שורות, syntax highlighting לפי קטגוריה. כל מאמר הוא 'function', מבזקים הם 'callouts'. צ'אט עליון כחלון console.

editor · key · string · comment
לצפייה ←
36 — LIVING-DESK
שולחן חי

ההיברידי הקודם: פיזיקת Matter.js, טלפון בזווית וטרמינל שמקליד לבד. הבסיס שממנו צמחו עשרת המנגנונים החדשים.

cream · cocoa · caramel · terracotta
לצפייה ←
37 — PARTICLES
חלקיקים

כותרות בנויות מאלפי חלקיקי-חום שמתפרקים ומתאחים לכותרת הבאה. הנקודות מגיבות לעכבר ולגלילה.

cream · cocoa · caramel · terracotta
לצפייה ←
38 — MAGNETIC
שדה מגנטי

רקע חי של אלפי קווים שמתעקלים סביב העכבר; כרטיסים נצמדים לקווי-השדה כמו נסורת-ברזל. גרירה מארגנת הכול מחדש.

cream · cocoa · caramel · terracotta
לצפייה ←
39 — FLIPBOARD
לוח מתהפך

לוח Solari מכני: כל אות מתהפכת בנפרד עם spring, וספרות מסתדרות מחדש. ה"וואו" של מספרים — מבוצע נכון.

cream · cocoa · caramel · terracotta
לצפייה ←
40 — MERCURY
כספית נוזלית

כתבות הן טיפות מתכת-חום נוזלית שמתמזגות ונפרדות; הצ'אט הוא הטיפה המרכזית שהחדשות זורמות אליה.

cream · cocoa · caramel · terracotta
לצפייה ←
41 — TUNNEL
מנהרת קלפים

גוללים פנימה אל מנהרת קלפים תלת-ממדית; הקלף הקדמי הוא הסיפור הנוכחי; פרלקס לעכבר וסיבוב הערימה.

cream · cocoa · caramel · terracotta
לצפייה ←
42 — LOOM
נול אריגה

הדף נארג בזמן-אמת: חוטי-זמן אופקיים וחוטי-נושא אנכיים; כל הצטלבות היא סיפור; הצ'אט הוא הבוכייר.

cream · cocoa · caramel · terracotta
לצפייה ←
43 — WIRE
רשת קונסטלציה

סיפורים הם צמתים בחוטים אלסטיים; גרירה מקפיצה את הרשת ב-spring; סיפורים חדשים נופלים למסלול סביב המרכז הפועם.

cream · cocoa · caramel · terracotta
לצפייה ←
44 — LETTERPRESS
דפוס-בלט

טיפוגרפיה טהורה: כותרות-ענק ב-variable-font שנושמות ומגיבות לקרבת הסמן. קליל, מהיר ומצוין למובייל.

cream · cocoa · caramel · terracotta
לצפייה ←
45 — RIVER
נהר גולל

נהר-חום רציף מתפתל במורד הדף; פריטי חדשות נישאים על הזרם; הגלילה מאיצה ומחוללת מחדש את הנתיב.

cream · cocoa · caramel · terracotta
לצפייה ←
46 — LIVING-ROOM
חדר-עבודה חי

סצנת חדר איזומטרי חמים: הצ'אט הוא טלפון על השולחן, חדשות על מסך ומאמרים כספרים; פרלקס ואנימציות-רקע.

cream · cocoa · caramel · terracotta
לצפייה ←