9 טיפים חיוניים לעיצוב אתרים למתחילי DIY

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


טיפים לעיצוב אתרים למתחילים

בימינו אפשר לכל אחד להיות מעצב אתרים. כן, זו אמירה נועזת – אך עם נגישות מוגברת לתוכנות עיצוב קוד פתוח כמו גימפ, ועם פלטפורמות בניית אתרים DIY כמו Wix ו- Weebly המציפות את השוק, הגבול בין חובב ובנאמנות מעצב אינטרנט הפך להיות הרבה יותר דק ומסוכן כבר מאוחר. הדבר המעניין ביצירתיות הוא שאף אחד לא יכול להחליט עבורך כשאתה “מוכן” למלא תפקיד מסוים. שפע של כוכבי רוק מעולם לא לקחו שיעורי מוזיקה; אמנים מצליחים רבים מעולם לא למדו אנטומיה אנושית; ורוב מעצבי הרשת שם אינם נושאים תואר רשמי. אז אם יצרת את אתר העסק שלך, האם אתה יכול לומר בביטחון שאתה “מעצב אתרים”? זה בשבילך לקבוע.

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

לחץ לציוץ

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

מה המדריך הזה (ומה הוא לא)

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

טיפ מהיר: ידע בסיסי ב- HTML ו- CSS יהווה יתרונות עצומים עבור כל מעצב אינטרנט חדש. אם אתה באמת רוצה לשים יד בקידוד, אני מציע לבדוק את זה W3Schools כדי ללמוד עוד על הבסיס.

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

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

1. הרחק את העכבר, הרם עיפרון

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

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

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

2. עקוב אחר היררכיה

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

שמור על תוכן “מעל לקפל”

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

באמצעות תמונת “גיבור”

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

דוגמה לגיבור / דוגמת באנר

“הקיפול” עשוי להשתנות בהתאם להתקן

כאן הדברים מסתבכים – ומדוע אסור להכביד על עצמך בניסיון להתאים לכל מה שמעל לקו הקסום הזה. בהתאם למכשיר המשתמש, ממדי המסך עשויים להשתנות בצורה אדירה. לתצוגה המפילה לסת 5K יש רזולוציה אנכית של 2880 פיקסלים, ואילו ל- iPhone 5 יש פחות ממחצית מזה. המשמעות היא שמשתמשים ניידים פשוט לא יוכלו להתאים תוכן רב לנדל”ן המסך שלהם. (עוד על כך בהמשך.)

טיפ מהיר: כלל האצבע הכללי הוא להבטיח שתכני “מעל הקפל” ​​משתלבים במכנה המשותף הנמוך ביותר למידות המסך. זה בדרך כלל מקובל 768 פיקסלים של רזולוציה אנכית.

3. טיפוגרפיה היא העיצוב שלך

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

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

4. צבעים & הניגודים הם מכריעים

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

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

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

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

טיפ מהיר: עדיף להימנע רוויה מלאה עם צבעים באינטרנט. אדום טהור (ערך hex # ff0000) הוא מעט אגרוף מדי בעיניים. באופן דומה, שחור טהור (# 000000) לגופנים נוטה לרטוט חזק מדי לעיניים, ואילו שחור מעט מופחת (# 333333) מאפשר קריאה קלה יותר.

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

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

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

6. שימוש בתמונות

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

הבנת סוגי קבצים & דחיסה

יש צעד נוסף שיש לנקוט לשימוש בתמונות באינטרנט. התמונות המפוארות שאתה מקבל מאתרים כמו Shutterstock ו י.פ.י. יכול להיות מסיבי למדי (5,000 או יותר פיקסלים אופקיים וגודל של 10 מגה-בתים) וזה בסדר להדפסה, אך הם אינם מתאימים לאתרים. לא לכולם יש אינטרנט מהיר של סיבים תזונתיים, לכן עליכם לצמצם את גודל התמונות שלכם בכדי לטעון זמני (שלא לדבר על 40% מהמבקרים יעזבו אם האתר לוקח יותר משלוש שניות לטעון!). בדרך כלל אתה רוצה לשמור את כל התמונות שלך בכל פעם מקסימום של 500 קילובייט בגודל, אם כי כנראה שגודל הקובץ הממוצע אמור להיות בסביבות 100 קילובייט.

  • JPEG הוא הפורמט הסטנדרטי לתמונות. זהו פורמט אובד, שפירושו שאיכות התמונה שלו מופחתת בעת דחיסה. אם אתה משתמש ב- JPEG לתמונת רקע ברוחב מלא, אני ממליץ לשמור על הרזולוציה האופקית שלו ב לא פחות מ- 1200 פיקסלים. למטרות כלליות, הימנע משימוש בכל תמונה עם פחות מ- 600 פיקסלים רזולוציה אופקית, מכיוון שהיא ככל הנראה תופיע מטושטשת על מסכים מודרניים.
  • PNG היא הבחירה המועדפת על גרפיקה או עבור תמונות הדורשות שקיפות. זהו פורמט ללא אובדן, שהוא נהדר לשמירה על איכות תמונה אך יכול גם להגדיל את גודל הקבצים. באופן כללי תשתמש בגרפיקה של PNG לצורך איורים, סמלים או תמונות קטנות יותר שניתן לערום על גבי אלמנטים אחרים בגלל השקיפות שלהם. לעיתים רחוקות תזדקק ל- PNG להיות גדול מ- 1000 פיקסלים.
  • SVG (גרפיקה וקטורית מדרגית) הוא פורמט חדש יותר שמחליף GIF ואפילו PNG במקרים מסוימים. היופי של SVG הוא שהוא יכול להיות גדול או קטן ככל שיהיה על המסך כמו שאתה זקוק לו, והכל תוך שמירה על צלילות ופריכות מושלמים (ועדיין להיות גודל קובץ קטן). עליך לשקול להשתמש ב- SVG עבור כל לוגו, אייקון או וקטור גרפי באתר האינטרנט שלך; ככל שמוצגי DPI גבוהים הופכים להיות דבר שבשגרה, החדות של SVG תספק את איכות התמונה הגדולה ביותר.

דוגמאות לסוג קובץ תמונה

6. עיצוב מובייל ראשון

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

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

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

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

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

7. שמור על העניינים

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

8. שמור על זה פשוט

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

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

9. מרחבים פתוחים גדולים

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

סיכום

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

מעצב נולד!

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