עיצוב אתרים – רשימת טיפים למיתוג נכון

שחור לבן מתוך האתר של שיראל אברהמי

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

השתמשו בתמונות גדולות

תמונות גדולות שממלאות את כל המסך מרשימות יותר ועושות אפקט "וואו" מה שכל לקוח כמעט מבקש שיקרה שנכנסים לאתר שלו. שימו לב, שימוש בתמונות גדולות מצריך שימוש בתמונות איכותיות ומרהיבות פי כמה משימוש בתמונות קטנות. היות והגודל שהתמונה תופסת על המסך צריך להצדיק אותו. בנוסף יש לוודא שמעלים לאתר תמונות גדולות מספיק אך לא גדולות מדי. לצורך ההבנה, אם התמונה צריכה למלא את כל המסך מומלץ להעלות תמונה בגודל של כ- 1600 עד 1920פיקסל רוחב על 1000 עד 1200 פיקסל גובה. אם נעלה תמונה קטנה מדי, היא תצא מטושטשת כאשר תוצג על כל המסך ואם נעלה תמונה גדולה מדי, יקח לה יותר מדי זמן להטען והיא תכביד על האתר.

מתוך האתר של נייק

דוגמה לשימוש בתמונה גדולה / מתוך האתר של נייק

תמונות גדולות מתוך האתר של פרדה

דוגמה לשימוש בתמונות גדולות שמכסות את כל המסך / מתוך האתר של פרדה

רספונסיביות

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

מובייל תחילה

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

דוגמה להתאמה למובייל / מתוך אתר המדיה

חללים לבנים

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

מתוך האתר של ארמני

דוגמה לחללים לבנים / מתוך האתר של ארמני

טקסטים גדולים

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

טקסטים גדולים מתוך האתר גרו

דוגמה לטקסטים גדולים / מתוך האתר של גרו – גרופון החדש

אנימציות

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

דוגמה לאנימציה / מתוך האתר של ארמני

שחור לבן

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

שחור לבן מתוך האתר של שיראל אברהמי

דוגמה לשימוש בשחור לבן / מתוך האתר של שיראל אברהמי

הנעה לפעולה

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

כפתורים ולינקים מתוך אתר המדיה

דוגמה: כפתורים ולינקים / מתוך אתר המדיה

חלון קופץ מתוך האתר של קסטרו

דוגמה לחלון קופץ / מתוך האתר של קסטרו

שימוש בוידאו כרקע

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

שימוש בוידאו כרקע מתוך אתר Total Immersion

דוגמה לשימוש בוידאו כרקע / מתוך אתר Total Immersion

סגירת תפריט