אינטרנט 3.0: עידן חדש של עיצוב אתרים כבר כאן

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


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

שמעתם על בלוקצ’יין לפני, ואת הביטוי אינטרנט מבוזר.

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

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

מה לגבי בינה מלאכותית (AI) ולמידה במכונה (ML)?

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

ועדיין…

פוסט זה אינו עוסק באף אחת מאותן טכנולוגיות

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

במילים אחרות, כיצד השתנו אתרים בחמש השנים האחרונות, וכיצד משתנה הצד של עיצוב האתר בדברים עם Web 3.0?

כך נראה פעם הרשת:

אתר 1.0 Old School אתר אינטרנטרשת קלאסית 1.0

ובאמצע שנות האלפיים התחלנו לראות את הופעתו של Web 2.0 – שנראה כמו משהו כזה:

עיצוב אתרים 2.0Web 2.0 – גישה נפוצה לעיצוב אתרים חלק.

אבל, זה דבר בהשוואה למה שאנחנו רואים בעיצובים של Web 3.0:

דוגמה לתצוגה מקדימה של אתר Web 3.0Web 3.0 – צבעים, צורות ייחודיות, יישור מושלם לפיקסל ועוד! אתר המדובר: טיפות בריאות

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

אז איך הגענו לכאן, ומה אתה צריך לדעת?

מהו עיצוב אתרים 3.0: שאלותיך נענו

עבור פרק זה, אני מתמקד בשאלות הבאות:

  • במה אתרי אינטרנט של Web 3.0 שונים מהשנים הקודמות?
  • מדוע מעצבים משתמשים בכל כך הרבה צורות ואלמנטים עיצוביים אחרים?
  • האם בוני דפים עוקבים אחר המגמות?

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

אז בואו ונמשיך עם השאלה הראשונה.

מס ‘1: במה שונים אתרי אינטרנט 3.0 מהשנים הקודמות?

עיצוב גחמני

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

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

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

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

דף הבית של פיו

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

בסוף 2018, MailChimp מיתג מחדש את כל האתר שלהם, ואחד הדברים שבחרו להציג היה השימוש באיורים.

להלן שלוש הסיבות המובילות מדוע עליכם לשקול להשתמש באיורים:

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

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

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

והשינוי השלישי המשמעותי ביותר הוא טיפוגרפיה.

Web 3.0 טיפוגרפיה

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

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

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

רשימות גופנים בחינם - -

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

כמו כן, הוא כותב מדריכים ומתחזק באופן קבוע את מדריך האתר “אתר היום” שלו. בכל פעם שאני עובד על פרויקט חדש, Typewolf הוא אחד האתרים הראשונים שאני מבקר בהם.

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

מס ‘2: מדוע מעצבים משתמשים בכל כך הרבה צורות ואלמנטים עיצוביים אחרים?

צורות בעיצוב אתרים

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

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

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

צורות וגיאומטריה בעיצוב אתרים

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

אתה יכול גם להשתמש ברכיבי רקע תומכים כדי להדגיש תוכן חשוב, כך:

עיצוב אתרים אסתטי

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

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

מס ‘3: האם בוני דפים עומדים בקצב המגמות?

בונה עמוד אלמנטור

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

אלמנטור, שראתה למעלה מ- 25 מיליון הורדות, מפתחת כל העת את ספריית הרכיבים שלה כך שתכלול אלמנטים המפצים לרשת המודרנית. ו- Weblium משתמשת ב- AI כדי לעזור למנהלי אתרים חסרי ניסיון ליצור אתרים מדהימים ויזואלית.

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

יישומונים של Elementor Pro

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

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

כלים לעיצוב Web 3.0: המגמות הנוכחיות

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

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

עיצוב מסגרת קווית

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

להלן הכלים שיעשו את כל ההבדל.

מס ‘1: סקיצה

סקיצה

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

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

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

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

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

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

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

ואם אתה בן / ת מתחיל / ה ומחפש ללמוד אז בדוק את זה קורס מקוון.

מס ‘2: לבוש

לבוש

כאמור, Sketch בנוי אך ורק עבור MacOS. למרבה המזל, Icons8 לקחו על עצמם ליצור אלטרנטיבה למשתמשי Windows. והחלק הטוב ביותר הוא שזה בחינם לחלוטין.

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

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

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

# 3: פיגמה

פיגמה

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

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

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

השראה לעיצוב Web 3.0: למדו מהטובים ביותר

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

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

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

# 1: לאפה נינג’ה

לאפה נינג'ה

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

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

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

לאפות נינג'ה לאפה

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

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

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

# 2: OnePageLove

OnePageLove

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

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

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

# 3: פרסים

פרסים

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

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

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

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

שווה לעשות סימניות ולבדוק שוב פעם בשבוע.

מסקנה: לאן ללכת מכאן

עיצוב אתרים הוא ענף תחרותי. ולא בגלל שאנשים רוצים ליצור אתרים טובים יותר מאחרים. זה תחרותי ביותר מבחינת ממשק משתמש ו- UX.

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map