כל בעל אתר חולם על עיצוב ייחודי למשאב שלו. כולם יודעים שאדם מקבל את פניו בבגדיו. כך גם לגבי האתר, שכן קודם כל המבקר שם לב לעיצוב הפרויקט, ולאחר מכן לתוכן. אם העיצוב בהיר מדי או להיפך משעמם, המשתמש יעזוב בקרוב את המשאב. אין למלא את האתר באלמנטים מיותרים, שכן לעתים קרובות משאבי אינטרנט בעיצוב מינימליסטי נראים הרבה יותר מעניינים. איך יוצרים עיצוב אתר?
למעשה, ניתן לחלק את כל תהליך העיצוב לשלושה שלבים: יצירת סקיצה, יצירת פריסה בעורך גרפי, פריסת העיצוב. ניתן לצייר סקיצה עיצובית בעורך תמונות פשוט או בעיפרון רגיל על פיסת נייר. באשר לפריסה, רוב המעצבים משתמשים בפוטושופ כעורך הגרפיקה החזק ביותר שקיים. לצורך עיצוב פריסות תזדקק לידע בשפת סימון היפר -טקסט ו- CSS. לפני שאתה יוצר עיצוב משלך, שאל את עצמך כמה שאלות פשוטות: האם אני יודע HTML ו- CSS, והאם אוכל לעבוד גם עם עורך גרפי?
אם אתה עונה שלא, תהליך העיצוב לא יעבור מעבר לשלב הראשון. לא קשה לצייר סקיצה, אך לא כל משתמש יכול ליצור פריסה ולהמציא את העיצוב המוגמר. כתוצאה מכך, מומלץ ללמוד תחילה את היסודות של HTML | CSS, כמו גם לצפות בכמה סרטוני הדרכה על פוטושופ, על מנת לדעת היכן נמצא כל כלי, כיצד ליישם מסננים ועוד.
לפני שתתחיל לשרטט, צור תמונה של העיצוב העתידי בראש שלך. שימו לב שכל עיצוב מורכב מהחלקים הבאים:
- "כותרת" של האתר - החלק העליון של כל עיצוב, כולל, ככלל, הלוגו, שם האתר וכמה כפתורים (אנשי קשר, על המחבר). הכותרת יכולה להיות בגבהים שונים, אך בדרך כלל פרמטר זה אינו עולה על 300 פיקסלים. טופסי חיפוש ומודעות באנר נמצאים לרוב בחלק העליון של האתר.
- "סרגל צד" - התפריט הצדדי של האתר. סרגל הצד מכיל מידע משני ואלמנטים נוספים: בלוק עם מאמרים טריים, טופס חיפוש, סקרים ולוחות שנה שונים, קישורים, מודעות ורכיבי ניווט של משאבים. ניתן להשתמש במספר סרגלי צד בעיצוב האתר, אך ישנם עיצובים ללא סרגל צד.
- "מרתף" - החלק התחתון של האתר. בדרך כלל הוא מכיל קישור למשאב הראשי ולזכויות יוצרים בסגנון "(ג) 2014 האתר הטוב ביותר." אך בשנים האחרונות, קונספט עיצוב המרתף השתנה עם הופעת המכשירים הניידים. ב"מרתף "החלו להתיישב אלמנטים המונחים בדרך כלל בסרגל צד.
- "חלק עיקרי" - בלוק בו נמצא התוכן העיקרי.רוב המעצבים ממקמים את החלק העיקרי של האתר במרכז כדי להקל על קריאת החומר.
אז, עכשיו אתה יודע מאיזה חסימות האתר מורכב. הגיע הזמן להתחיל לפתור את השאלה כיצד ליצור עיצוב אתר בעצמך. פתח את עורך התמונות הפשוט ביותר (צבע מספיק) וצור תבנית חדשה ברזולוציה של 1280x1024. ראוי לזכור מיד כי בעת יצירת אתרים, אין שימוש במדידות מטריות. כל הבלוקים "נמדדים" בפיקסלים.
לדוגמה, החלטת לשרטט עם סרגל צד אחד. סמן את גבולות הכותרת התחתונה, כותרת האתר וסרגל הצד בעורך גרפי.
יש לך רעיון להכין כמה עמודות צד ולמקם את התוכן במרכז? נהדר, אבל קח בחשבון את רוחב סרגל הצד והמרחב של התוכן העיקרי בעת סימון. עמודות הצד לא צריכות להיות רחבות מדי (לא יותר מ -300 פיקסלים), ולהשאיר לפחות 500 פיקסלים לתוכן הראשי, אחרת הטקסט לא יהיה נוח לקריאה.
עכשיו כשהסימנים העיקריים נפרסים, הגיע הזמן להוסיף כמה אלמנטים למערכון העיצוב. הוסף זכויות יוצרים בכותרת התחתונה, בתיבת החיפוש, הכותרת וכו '. מערכון העיצוב יקבל מראה מעניין יותר ולא יהיה אוסף של צורות גיאומטריות.
אם למדת כיצד לעבוד בפוטושופ, הגיע הזמן להפוך את הסקיצה לפריסה. אך לפני כן, החליטו על צבעי האתר. לאתרי חדשות, צבעי רקע לבנים, צבעי טקסט שחורים וקישורים כחולים מתאימים יותר. אם העיצוב נוצר לאתר נשים או נסיעות, השתמש בצבעים בהירים יותר. יחד עם זאת, אתה לא צריך לעשות עץ חג המולד מהעיצוב, מכיוון ששפע הפרחים מפריע לתפיסת התוכן העיקרי.
התחל למלא כל בלוק בפריסה בגרפיקה. התנסה בצבעים וברקע, צור אלמנטים וכפתורים משלך. עם זאת, באינטרנט יש מספר עצום של רקעים שונים, כפתורים ליצירת עיצוב.
כאשר הפריסה סוף סוף מוכנה, חותכים אותו לגושים ועושים ממנו עיצוב. במקביל, חתום על כל שכבה כדי להקל על ההקלדה.
עם הופעתם של מכשירים ניידים, הפופולריות של עיצובים "גומי" מגיבים גדלה. כל משתמש יכול ליצור עיצוב לאתר שלו, אך רק מעצב אמיתי יכול להתאים אותו לכל המכשירים. בתחילת הקריירה העיצובית שלך, נסה להתחיל בתבנית פשוטה.
זכור שלושה כללים פשוטים של "עיצוב נהדר":
- הטקסט חייב להיות קריא היטב גם עם תמונות מושבתות בדפדפן;
- השתדלו לא להשתמש בצבעים "רופפים";
- צור ניווט לאתר ידידותי למשתמש.
לאחר יצירת העיצוב והעברתו לאתר, הקפד לבדוק אותו בדפדפנים שונים. הזמן חברים ומכרים לבדיקה, כי לביקורת של מישהו אחר יש השפעה חיובית על אדם. זכור את הכלל הבסיסי: עיצוב האתר צריך להיות אהוב לא רק עליך, אלא גם על ידי משתמשים אחרים. לכן, הקשיב תמיד לדעותיהם של מבקרי הפרויקט שלך.
.
