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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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