במה עיצוב אתרים שונה מהעיצוב הגרפי המסורתי

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

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

תנועה אינטראקטיבית ואינטראקציה

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

מינוחים חדשים

– כניסת האינטרנט יצרה מושגים חדשים שלא היו מוכרים לפני, כגון:
– קרנינג – Kerning
– גובה שורה – line-height
– רזולוציה של עמוד/תמונות לאינטרנט
UX – User eXperience – – חווית משתמש
– פונט לאינטרנט – Web-Font והמגבלות שלו
– עמוד Css – עמוד html – עמוד פלאש – טפסי אינטרנט

נקודות חשובות שמעצב לאינטרנט צריך לקחת בחשבון

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

תבניות עיצוב

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

רזולוציות

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

העברת העיצוב לרשת

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

אפשרויות הפוטושופ נכנסות לאינטרנט

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

סדר העבודה של מעצב לאינטרנט

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

סיכום ודעה שלי

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