הבאנו מספר אלמנטים אותם יש לקחת בחשבון בעיצוב אתר

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

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

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

גלילה ארוכה

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

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

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

דוגמא מאתר Flat Guitars:

Flat Guitars long scroll


זום אוטומטי

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

תפריטים רחבים

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

דוגמא מה-Jerusalem Post:

Jerusalem Post wide menu

קווי מתאר מודגשים

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

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

דוגמא מאתר "רשת":

reshet grid

טקסט בהפתעה

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

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

דוגמא מאתר GeekTime:

geektime popup text

עיצוב שטוח

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

דוגמא מאתר Code Academy:

code academy flat design

נשמח להציע לך פתרון מותאם אישית קבל הצעת מחיר