תפריט
תפריט
כיצד להפוך את חווית המשתמש
באתר האינטרנט לנוחה יותר?
על מה המשתמשים באתר שלכם לוחצים
ואיך זה קשור לרספונסיביות. בואו לגלות
עיצוב אתרים ב2020 – יותר מתקדם
ויותר אינטואיטיבי
הידעת? כשהחיפוש בגוגל משלים
את המילים סיכויי הרכישה יעלו ב60%
חווית המשתמש או בשמה המקובל UX היא בפשטות החוויה של הלקוח מגלישתו באתר שלך. האם הכל עבר חלק?, הצבעים לשביעות מוחך?המונח UX הוטבע לפני יותר משני עשורים מתוך הבנה שהחוויה בשימוש במוצר מורכבת מכמה גורמים עיקריים המכילים אלמנטים פסיכולוגיים וטכניים:
פונקציונאליות – כמה שימושי אתר האינטרנט לצרכי הלקוח שלך? ייחודיות – מה מייחד ומבדל אותך מבין שאר החברות בתחומך? היתכנות לחיזוי – הלקוח מצליח להבין איך להתמצא באתר גם כשזה ביקורו הראשון?
אמינות – האם האתר שלך מספק את צרכי הגולש וגורם לו לבטוח בך? הרמוניה – איך מעברי הצבע והפונטים מסתדרים לך בראש? רוח – האם השפה העיצובית משדרת אחידות עם אופי אישי?
"שימוש כיפי" – האם הלקוח הפיק סיפוק מהשימוש באתר? אינטראקציה – האם הלקוח קיבל מענה לצורך שלו והאם השאיר את פרטיו? תגובתיות – במידה והלקוח תקשר אתכם, האם הייתה לו חוויה נעימה?
בעניין ממשק המשתמש (User Interface) UI בקצרה, אותה הגברת אבל ברמת הפלטפורמה (שעליה יבוסס האתר לדוגמה), אנו עובדים עם וורדפרס שהיא מהמובילות גם בממשק המשתמש בתחום.
זה ממש בקצרה בנושא UI, כשאנו מעצבים אתר אינטרנט אנו מתחבטים ומוצאים פתרונות יצירתיים ומאתגרים שמשפיעים על העיצוב ועל צורת החשיבה פשוט בכדי שללקוח תהיה חווית שימוש מקסימלית.
עיצוב אתרים זה תחום עיצוב גרפי שמושפע מכל עולמות העיצוב הגרפי ובו מתעסק מעצב האתרים, שהוא מעצב גרפי עם יתרונות נוספים כמו עבודה עם קוד וסביבת ניהול אתר. עיצוב האתר יעוצב בקפידה בהתאם למה שהעסק משדר ובהתאם לשפה העיצובית.
אתר האינטרנט ועיצובו בפרט משפיעים קשר ישיר והדוק על התדמית של העסק, זה המקום הרשמי שמאגד ומציג את המידע אודות העסק ושירותיו. אתר מעוצב ומדויק ירשים את לקוחותיכם וגם יביא אליכם לקוחות חדשים.
בתחילת פרויקט עיצוב אתרים יש לבצע אפיון מקיף של צרכי העסק וקהל הגולשים באתר. יש לבחור את הצבעים, הפונטים והשפה העיצובית שילוו את דפי האתר. לאחר מכן יש ליצור עיצובים לעמודי התוכן ולהטמיעם, בנוסף גם להטמיע את הטקסטים, את סידורי עימוד הטקסט (טיפוגרפיה) ובחירת האפקטים המתאימים. לקראת סיום הפרויקט יש להוסיף אלמנטים עיצוביים ואפקטים משלימים לחווית גלישה כיפית ובנוסף גם ליצור פופאפים וטמפלטים מתאימים. בסיום הפרויקט תקבל אתר אינטרנט איכותי עם עיצוב מותאם אישית שתוכנן בקפידה ותוך מחשבה עמוקה על צרכי העסק.
בחירת הצבעים המתאימים היא חלק אינטגרלי מעבודת העיצוב של מעצב האתרים.יש לבחור את הצבעים על פי צבעי המותג והשפה העיצובית שלכם ולהתאים אותם לעיצוב האתר. דגימות צבעים ובחירת מעברי צבע הם חלק מפעולת בחירת הצבעים שנעשית ע"י מעצב גרפי.
כשמעצבים אתר אינטרנט יש להשתמש בקונספט המיתוגי הקיים של העסק. הקבצים הגרפיים הקיימים יכולים להועיל למעצב האתרים ולהשפיע על השפה העיצובית, על הצבעים ועל האלמנטים שיעוצבו במיוחד.
עיצוב אתרי אינטרנט דורש השקעה חשיבתית ויצירתית במיוחד, מקצועיות וניסיון בתחום לרוב יגרמו לתהליכים לרוץ מהר אך בפועל גם בפרויקט הכי קטן נחוצה השקעה חשיבתית בכדי למצא ממנו את מלוא הפוטנציאל. לצורך כך כשאנו ניגשים לפרויקט אנו מפעילים את החושים שלנו, מקבלים השראה ומוצאים לבסוף את הדרך לבצע את הפרויקט תוך שמירה על סטנדרט איכות גבוה ביותר.
בשלביו הראשונים של פרויקט חשוב לקבל השראה מאתרים אחרים בתחום, עיצובים שמצאו חן בעיננו, שפה עיצובית שהרשימה אותנו ואפילו אלמנטים שלא ראינו בשום אתר אחר. אנו נוהגים לחקור קצת יותר ואף לפשפש בדפי האינסטגרם והפייסבוק של אלה שהרשימו אותנו, גם כשאנו נתקלים בעיצוב ממש מיוחד שממש גורם לנו להרגיש מין הפרעה בצד אנחנו בודקים אותו גם במובייל.
כשניגשים לפרוייקט גרפי לאתר האינטרנט יש להשתמש בפונטים שייצגו אתכם כראוי, קיימים המון פונטים חינמיים באינטרנט וגם כאלה בתשלום. במידה והחלטתם לבחור פונט בעצמכם יש לבדוק את המשקלים שלו ואת זמינותו גם בשפה האנגלית והאופציונליות שלו (מספרים ותווים מיוחדים) וכמובן את זכויות השימוש, לאחר מכן להעבירו לגרפיקאי בקבצים בפורמט ZIP/RAR/TTF/FNT המכילים את הפונט וניתנים להעלאה לתוכנת העריכה.
טיפוגרפיה היא עימוד וסידור הטקסט במסמך/פרויקט. כשניגשים לעבודת גרפיקה המכילה טקסט יש להתאימו בצורה הגיונית ופרופורציונאלית לתמונה/עמוד. יש לבחור את הפונט ומשקלו, להחליט על גדלי הטקסטים, ליישר את הטקסטים בהתאם לעיצוב ולהשתמש בצבעים מתאימים. ניתן לכוון את ריווח האותיות, גובה האותיות ולשלב אלמנטים עיצוביים בטקסט.
פלטפורמות צד שלישי יכולות להיות כל מיני חברות שמתממשקות עם האתר שלכם, לדוגמה חיבור סליקה באמצעות פייפל לאתר האינטרנט מאפשר ללקוחות לרכוש מהאתר (אחת האופציות), וכשהלקוח מופנה לדף מעמד התשלום והקבלה בפייפל יכולות להופיע גרפיקות שמייצגות את העסק שלכם, אנו רואים זאת כחלק מעיצוב האתר ומייחסים לכך חשיבות עוד בזמן אפיון האתר.
מידע לגבי עבודה עם פלטפורמות צד ג' יובא לידי מעצב האתר ע"י בונה האתר כבר בשלב האפיון.
סביבת העבודה של מעצב האתרים קצת "לא סטנדרטית", מסך אחד לאורך ואחד לרוחב, טאבלט מבצבץ בפינה ולפטופ מותש מעבודה, ואיך לא גם איזה אייפון; כולם משמשים לבדיקת התוצר הסופי ומראהו בפועל.
זאת ועוד, אותו מעצב אתרים עובד בשיתוף פעולה עם כותב התכנים ועם בונה האתר, מידי פעם גם עם מתכנת מקצוען ואיך לא גם איתך הלקוח 😉
חשוב להכיר את השוק והסביבה העסקית שאלמנטים מהם יבואו לידי ביטוי בעיצוב אתר האינטרנט. היכרות עם המוצרים/שירותים, ההתנהלות העסקית, סוגי הלקוחות וכל פיסת מידע תהיה רלוונטית ותהווה גורם בבחירת השפה העיצובית ובאפיון העיצובי של הפרויקט.
<!DOCTYPE html>
<html>
<head>
<title>UX/UI</title>
</head>
<body>
< h1>תכנות וקוד</h1>
<p class="'white">עיצוב לאתר אינטרנט לא מסתכם רק בעיצוב הקבצים הגרפיים, מעבר לתוכנות הסטנדרטיות שבהן צריך מעצב גרפי להיות בקיא, מעצב האתרים צריך לדעת להתעסק בשפות קוד (HTML, CSS) ולהבין עניין בממשק ניהול האתר (בוורדפרס כמובן 😊)</p>
</body>
</html>
אתר האינטרנט שלכם זקוק למייקאובר? או שמדובר בתיקון לעיצוב האתר?
אנחנו אוהבים לעצב ולגרום לאתרים להפוך לחיים ומושכים את העין, נשמח לתת לך פתרונות עיצוב ולעצב לך את האתר עם הטאצ' האישי שלנו 😎
עבור עיצוב אתרים קיימות מגוון רחב של תוכנות ומקורות תוכן שמשמשות את המעצב בכל שלבי עיצוב האתר.
למשל שירותים אינטרנטיים שמספקים תוכן כמו השראה, גרפיקות, טכניקות וחדשנות ובעצם מספקות למעצב את הכיוון.
העבודה בפועל מתבצעת ב2 סוגי תוכנות, תוכנות העיצוב הסטנדרטיות (אילוסטרייטור, פוטושופ, XD), ותוכנות העיצוב באינטרנט (ממשק הניהול של וורדפרס, קצת קוד וכמה פלטפורמות צד ג').
תחום עיצוב אתרי האינטרנט רווי בתקנים וסטנדרטים של אינספור איגודים וגופים רשמיים. למשל קבצים וקטוריים שוקלים מעט ולכן שימוש בהם באתר יפחית את זמני הטעינה. כל הקבצים הגרפיים שיועלו לאתר יישאו את זכויות היוצרים של בעל האתר ויימצאו מעת לעת בגוגל, חשוב לא להפר זכויות יוצרים של אנשים אחרים בעת שימוש בגרפיקות קיימות. חוק הנגישות הפך גם הוא לחלק חשוב בעיצוב האתר ועל כן דורש התאמות של טקסטים לתוסף ההתאמה בכדי שיוצגו בצורה ראויה גם לאנשים עם לקות.
עניין הרספונסיביות (התאמות תצוגה) הוא סטנדרט בפני עצמו ועליו מפורט בהמשך.
החלק החשוב ביותר בעיצוב אתר אינטרנט הוא שיותאם בצורה מושלמת לכל אמצעי התצוגה האפשריים, זאת אומרת שבכל מכשיר שתציגו את האתר העיצוב יהיה תואם. העניין הזה מורכב מאוד והנה הדגמה: גרפיקה שנראית טוב באתר האינטרנט במחשב נראית גרוע במובייל, הסיבה היא כי הפריסה של מסך המחשב היא לרוחב ובסמארטפונים לאורך והדרך הטובה ביותר לתקן זאת היא ליצור כל גרפיקה מראש בכמה גרסאות תצוגה ולכן עניין הרספונסיביות מכפיל ואף משלש את העבודה הכללית. מעצב אתרים מקצועי "מתגבר" על משברים שיכולים לנבוע במהלך הפרויקט כתוצאה מבעיות התאמה ומתאים את הגרפיקות מבעוד מועד לאחר שלב האפיון העיצובי.
פופאפ הוא כפתור קטן בצידי האתר שבלחיצה עליו גורם לפתיחת "חלון קופץ" ובו אפשר לכתוב טקסטים ולעצב תמונות כמו דף רגיל, לפנק מידי פעם בקופון אבל יש לו פאנץ'; ניתן לשלוט על ההופעה שלו.
ניתן גם לתכנן את הופעת הפופאפ לפי הגדרות שמעידות על "כוונות" מסויימות של הגולש, כמו חלון קופץ מותאם לביקורך הראשון באתר או חלון קופץ לאחר שגלשת 4 דקות באתר, בנוסף אפשר להגדיר את הופעתו לטריגרים מורכבים כמו מעבר תנועת עכבר שמעידה על כוונות יציאה מהאתר ועוד
