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

מדוזה+ שיעור 3

שיעור 3: עיצוב אתר אינטרנט – לא רק מה יפה, אלא מה מרגיש נכון

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

ופה בדיוק קורה משהו מעניין:  

רוב האנשים בוחרים צבעים לפי הלוגו, שמים תמונות "יפות", וזהו.  

אבל האמת? עיצוב טוב הוא לא רק יופי – הוא אמון, רגש, ואפילו תנועה פנימית של המשתמש.

פרק 1

צבעים: מה אתה באמת משדר לגולש?

צבע הוא לא רק עניין של טעם.  כל צבע אומר משהו:

כחול – ביטחון, מקצועיות (לא סתם פייסבוק, לינקדאין, ופייפאל בחרו בו)

אדום – תשוקה, דחיפות (אבל גם מסוכן)

ירוק – טבע, בריאות, יציבות

שחור – יוקרה, רצינות, עומק

צהוב** – שמחה, חום, קריאה לפעולה

רוצה שהגולש ירגיש שהוא בידיים טובות? תלך על צבעים קרירים ובטוחים.  

רוצה להניע לפעולה? הוסף גוון חם (אבל אל תצעק עליו).

והכי חשוב – שיהיה עקבי.  

שיהיה ברור שהכול שייך לאותו מותג, לא אותה תבנית גנרית שכל העולם משתמש בה.

טיפוגרפיה (פונטים): לא רק מה כתוב, אלא איך זה מרגיש

פונט זה כמו טון דיבור.  

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

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

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

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

(שניים יספיקו – אחד לכותרות, אחד לגוף הטקסט. וזהו.)

תמונות: האנושיות שמחברת את הכול

תמונה אחת שווה אלף מילים, נכון.  

אבל רק אם היא לא מהסטוק של כולם.

נסה להשתמש:

– בתמונות מקוריות (אפילו מהסמארטפון שלך, אם הן איכותיות)

– בצילומים שמרגישים אותנטיים, לא שחקנים אמריקאים עם שיניים מושלמות

– ואם אתה חייב להשתמש בסטוק – תחפש באתרים שפחות מוכרים (Unsplash, Pexels, או אפילו לשכור צלם לשעה)

במדוזה, אגב, אנחנו תמיד מנסים להשחיל משהו אישי בתמונות – יד אמיתית, שולחן עבודה, חיוך אמיתי.  

משהו קטן – שמשנה את הכול.

שפה ויזואלית אחידה – זה מה שעושה מותג

כמו שלחנות יש סגנון לבוש, גם לאתר יש סגנון:  

צבעים, כפתורים, צורות, אייקונים, מרחקים בין אלמנטים, תפריטים.

אתה רוצה שהגולש ירגיש שהוא במקום אחד ברור – לא במיליון עולמות.  

ולכן כל עיצוב טוב מתחיל בשפה גרפית ברורה.

 

אם יש לך מעצב – בקש ממנו להכין **UI Kit** (ערכת עיצוב של כל הרכיבים)  

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

לא לשכוח את הגרסה הכי חשובה – המובייל

יותר מ־70% מהתנועה באתר תגיע מהסמארטפון.  

אז אם אתה מעצב קודם כל במחשב – אתה בעצם עובד הפוך.

 

הכללים החשובים לעיצוב בנייד:

– כפתורים גדולים מספיק לאצבע

– טקסט קריא גם במסך קטן

– בלי מרווחים צפופים

– ולזכור – המובייל הוא לא מחשב מוקטן, הוא חוויה נפרדת.

עיצוב זה גם תנועה (Motion), אבל בקטנה

אנימציות קטנות יכולות להפוך אתר לקסום:  

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

אבל זה גם מקום להיזהר בו –  

יותר מדי תנועה תיצור בלגן ותכביד על הטעינה.

הכלל: אם זה תורם להרגשה, משפר חוויית שימוש – מעולה.  

אם זה רק "שיהיה מגניב" – תוותר.

ולשיעור הבא…

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

עכשיו הגיע הזמן לדבר על **מה שגורם לכל הקסם הזה לעבוד באמת – בניית האתר בפועל.**

ב־שיעור 4 במדוזה+  

ניכנס לעולמות של קוד, פלטפורמות, איך מחברים הכול – וגם איך לבחור בין WordPress, Webflow או אולי בכלל Shopify.

רוצה שהעיצוב שלך ייראה כאילו עשית אותו ב־San Francisco – גם אם אתה בבת ים?

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

Facebook
X
LinkedIn
WhatsApp
Email
קורס seo קידום אתרים
admin
תמונה שווה אלף מילים (וגם דירוגים): אופטימיזציית תמונות ווידאו (Image & Video SEO)

אל תזניחו את הוויז'ואלס! למדו איך לבצע אופטימיזציית תמונות ווידאו לאתר שלכם – משמות קבצים ותגיות ALT ועד לגודל קובץ ונתונים מובנים – כדי לשפר חווית משתמש, מהירות ודירוגים בגוגל.

קרא עוד »