עמוד הבית מאמרים עיצוב אתרים עיצוב אתר תדמיתי לעומת עיצוב אתר מסחרי‮

עיצוב אתר תדמיתי לעומת עיצוב אתר מסחרי‮

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

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

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

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


אתר תדמית - סטודיו שרה


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

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


מבנה‮ ‬ממשק ניווט‮ ‬זה מופיע גם‮ ‬באתר תדמיתי‮.

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

אתרים תדמיתיים מעוצבים במספר וריאציות‮.

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

 

BigPicICommetSite

 

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

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

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

 

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

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

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

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

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

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

כל הזכויות שמורות לסטודיו שרה קמינר
טלפון: 04-8670548    דואר-אלקטרוני: This e-mail address is being protected from spambots. You need JavaScript enabled to view it.
בניה ואחסון Ahoy IT סוכנות דיגטל
Studio Sara