אם אתה רוצה לעצב וליצור דפי אינטרנט, תהליך זה יהיה הרבה יותר קל אם אתה מתכנן מראש. בשלב התכנון, המעצב והלקוח יכולים לעבוד יחד כדי למצוא פורמט ופריסה המתאימים לצרכיהם. תהליך התכנון משפיע על סגנון או סגנון האתר, אפשר לומר שזה ההיבט החשוב ביותר בעיצוב אתרים, במיוחד אם זה למטרות עסקיות.
שלב
חלק 1 מתוך 4: יצירת המבנה הבסיסי
שלב 1. קבע את תפקוד האתר
אם אתה יוצר אתר אישי, אתה כנראה כבר יודע את התשובה. עם זאת, אם אתה יוצר אתר עבור ארגון, חברה או אדם אחר, עליך לברר מה הם רוצים ומה הפונקציונליות של האתר. כל מה שתציין כאן ייכנס לתוקף עם סיום דף האינטרנט.
- האם האתר דורש Storefront? האם יש להעיר הערות משתמשים? האם המשתמש יצטרך ליצור חשבון מאוחר יותר? האם מאמר האתר מכוון? או מכוונת תדמית? כל השאלות הללו ואחרות יעזרו לכם בעיצוב ועיצוב האתר.
- תהליך תכנון זה יכול להישרטט לציור, במיוחד אם מדובר בחברה גדולה ואנשים רבים מעורבים ביצירת פרויקט זה.
שלב 2. צור תרשים של מפת האתר (מפת האתר)
תרשים מפת אתר דומה לתרשים זרימה, המראה כיצד משתמשים עוברים מדף אחד למשנהו. אינך צריך דף אינטרנט בשלב זה, רק זרימה כללית של מושגים. אתה יכול להשתמש בתוכנית מחשב כדי ליצור דיאגרמות או לשרטט משלך על נייר. השתמש בדיאגרמה זו כדי להדגים את המושגים של סידור היררכי וקישוריות לדפי אינטרנט.
שלב 3. נסה את שיטת ניסוח הכרטיס
אחת השיטות הפופולריות לפיתוח רשת קבוצתית היא שימוש במספר כרטיסים כדי לברר את הציפיות של כולם. קח מספר כרטיסי הערה ורשום את התוכן הבסיסי של דף אינטרנט על כל אחד בנפרד. סדר את הקלפים האלה יחד עם הצוות שלך כדי למצוא את הרעיון הטוב ביותר. שיטה זו מתאימה לשימוש כאשר אתה משתף פעולה עם אחרים ביצירת דפי אינטרנט.
שלב 4. השתמש בנייר ולוח מודעות, או לוח לבן
זוהי שיטת תכנון מקורית בתקציב קטן, ניתן למחוק או לשנות תוכן במהירות ולשנות את הזרימה. צייר את עיצוב האינטרנט שלך על נייר, ולאחר מכן חבר את הניירות בחוט, או צייר קווים על הלוח. שיטה זו מתאימה מאוד לשימוש במפגשי סיעור מוחות.
שלב 5. צור מלאי תוכן
למעשה היא נוטה להיות מתאימה יותר לשימוש בעיצוב מחדש של אתרים מאשר בעיצובים אינטרנטיים חדשים. הכנס כל פיסת תוכן או דף אינטרנט לגיליון אלקטרוני. רשום את המטרה של כל פיסת תוכן או דף, השתמש ברשימה זו כדי לקבוע מה להסיר ומה לשמור. תוכל לפשט את מבנה האינטרנט ולפשט את תהליך העיצוב מחדש מאוחר יותר.
חלק 2 מתוך 4: יצירת מתאר HTML בסיסי
שלב 1. צור מסגרת חוט לבניית ההיררכיה של דפי האינטרנט
תבנית ה- HTML הבסיסית היא שרטוט האתר שתבנה, תוך שימוש בתגים הבסיסיים ביותר בלבד ותוכן לדוגמה (בלוקים/תבניות). מסגרת זו עונה על השאלה "מה גלוי באינטרנט והיכן?" עיצוב ועיצוב אינם נדרשים ביצירת מתווה זה.
- אתה יכול לראות את מבנה ותרשים הזרימה של התוכן עם מתאר בסיסי לפני שתבחר בהגדרת סגנון.
- תבניות HTML בסיסיות אינן סטטיות כמו מסמכי PDF או תמונות, תוכל לעבור במהירות על תוכן לדוגמה כדי ליצור מבנים חדשים.
- מסגרת הבסיס היא אינטראקטיבית, מה שמביא תועלת הן למפתחי אתרים והן ללקוחות. מכיוון שמסגרת בסיסית זו כתובה עם קוד HTML פשוט, עדיין תוכל לנווט בה ולדעת כיצד פועל החלפת דפי אינטרנט. לא ניתן לעשות זאת באמצעות PDF.
שלב 2. נסה את שיטת הארגז האפור
חסום או הדגש את תוכן דף האינטרנט שלך ב- Gray Box, התוכן החשוב ביותר נמצא למעלה. מיין את התוכן בעמודה אחת. לדוגמה, אם הדף הוא "אודות החברה" אז מידע מפורט אודות החברה נמצא למעלה, ואחריו רשימת צוותים, לאחר מכן פרטי התקשרות וכו '.
זה אינו כולל כותרות עליונות ותחתונות. Gray Box הוא ייצוג ויזואלי של התוכן שיופיע באינטרנט
שלב 3. נסה תוכנית בונה מתאר בסיסית
ישנן תוכניות שונות בהן תוכל להשתמש בתהליך יצירת מסגרת אינטרנט בסיסית. כמות קוד תכנות האינטרנט (שפה) שעליך לשלוט בה שונה עבור כל תוכנית. חלק מהתוכניות הפופולריות למדי כוללות:
- מעבדת תבניות. אתר זה מוקדש ל"עיצוב אטומי ", כל תוכן נחשב ל"מולקולה" המרכיבה דף אינטרנט גדול יותר.
- תרשימים. דף אינטרנט זה מספק שירותי תכנון ומסגרות מבוססי אינטרנט. אתרים אלה בתשלום ודורשים מנוי, אך ניתן לבנות מסגרות אינטרנט במהירות מבלי לשלוט בהרבה קוד תכנות אינטרנט.
- Wirefy. Wirefy הוא אתר נוסף המציע "עיצוב אטומי". מפתחי אתרים יכולים לקבל את הכלי בחינם.
שלב 4. השתמש בסימון HTML פשוט
תבנית בסיסית טובה תעבור בקלות לאתר המקורי. אל תחשוב יותר מדי על עיצוב אתרים במהלך יצירת התבנית הזו. השתמש בסימון שניתן להבין ולשנות אותו בקלות.
מסגרת בסיסית פשוטה עדיפה בהרבה. מטרת יצירת סימון היא בניית מבנה. ניתן להתאים את המראה החזותי מאוחר יותר באמצעות CSS וסימון מתקדם
שלב 5. צור מתאר בסיסי לכל דף אינטרנט
אתה עלול להתפתות להשוות כל דף אינטרנט עם מתאר בסיסי אחד. למעשה, זה רק יהפוך את האתר שלך למשעמם ומשעמם. צור מתאר שונה לכל דף, תבין שכל דף צריך עיצוב משלו.
חלק 3 מתוך 4: יצירת תוכן
שלב 1. הכינו את התוכן לפני יצירת דף אינטרנט
יהיה לך הרבה יותר קל לצפות בתצוגה מקדימה של תצוגת האינטרנט שלך אם כבר יש לך תוכן ממשי במקום להשתמש בדוגמאות או במצייני מיקום. אינך צריך להכיל יותר מדי תוכן, אך המוקאפ שלך ייראה הרבה יותר טוב אם תשתמש בעותק של התמונה המקורית.
אינך חייב לקבל את כל חומר המאמר, אך לפחות עליו להיות בעל כותרת ממשית
שלב 2. זכור שתוכן נהדר הוא לא רק טקסט
האינטרנט הרבה יותר מורכב מדף טקסט פשוט. אתה צריך מגוון תוכן שונה בכדי ליצור אתר מצוין למשוך ולהזמין מבקרים. לדוגמה:
- תְמוּנָה.
- קוֹל.
- סרטונים.
- שידור אינטרנט או זרם אינטרנט (טוויטר)
- שילוב פייסבוק
- RSS
- הזנת אינטרנט
שלב 3. בקש עזרה מצלם מקצועי
אם אתה רוצה לכלול תמונות באתר שלך, הרושם הראשוני שתקבל מהאתר שלך יהיה הרבה יותר טוב אם הוא יתמלא בצילום מקצועי. תמונה אחת טובה שווה יותר מעשרים תמונות באיכות נמוכה.
חפשו בוגר טרי באמנות הצילום כפתרון זול יותר מצלם מקצועי שנמצא בעסק זמן רב
שלב 4. כתוב מאמרים איכותיים
התוכן הכתוב בדף האינטרנט יקבע את כמות תעבורת האינטרנט שלך. אמנם אינך צריך לדאוג יותר מידי ליצירת תוכן בתהליך עיצוב זה, אך לא מזיק להתחיל לחשוב על כך מכיוון שתזדקק גם לתוכן באופן קבוע ברגע שהאתר שלך יופעל.
בנוסף לתוכן המאמר, קיים חומר כתוב שעליך להיות בעל תהליך הרכבת דף אינטרנט. למשל פרטי התקשרות, שם חברה או כל דבר אחר שישמשו מספר פעמים באתר
חלק 4 מתוך 4: הפיכת מושגים לאתרים
שלב 1. מסדרים את האלמנטים הבסיסיים
סידור אלמנטים זה חל על כל עמוד באתר שלך, כגון כותרות, הערות שוליים ותפריטי ניווט. הגדר אותו בסגנון פשוט מאוד כך שתוכל לבדוק כיצד כל הדפים נראים. זה שימושי במיוחד ככל שאתה מתקדם לתהליך פריסת האינטרנט.
אל תדאג יותר מדי לגבי פרטים, נסה לצפות בתצוגה מקדימה (תצוגה מקדימה) כיצד נראית הכותרת
שלב 2. צור פריסה פשוטה
התחל בהזזת מיקום השעון מעמודת המתאר הבסיסית למיקום האמיתי בדף. לדוגמה, ייתכן שתרצה להעביר את תפריט הניווט לדוגמא משמאל לדף ואת רשימת הכותרות ימינה.
המשך להתנסות בפריסות אינטרנט למספר דפים, לפני שתמשיך לשלב הבא. אפשר לאחרים להסתכל על זה כדי לראות אם הפריסה שאתה יוצר מרגישה חיה
שלב 3. צור מדגם
השתמש בתוכנית כמו Photoshop ליצירת דוגמאות או דפי דוגמה לאתר שלך. השתמש בפריסה שחיברת כמדריך. אתה יכול לבצע הדגמות מהירות יותר ולקבל את התוצאות הרצויות באמצעות תוכנית לעיבוד תמונות. תוצאות התמונות הללו יכולות לשמש מאוחר יותר כהפניה בתהליך כתיבת קוד תכנות אינטרנט.
שים את התוכן האמיתי במדגם כדי שזה ייראה טוב
שלב 4. החלף את הרעיון לדוגמא בתוכן המקורי
הוסף תוכן ואלמנטים לדפי אינטרנט. אל תזיע את הגדרות סגנון האינטרנט לעת עתה, רק ערם הכל למיקום הנכון. זה יעזור לך לבדוק את השינויים בסגנון האינטרנט שתבצע מאוחר יותר.
שלב 5. צור מדריך בסגנון אינטרנט
חשוב מאוד לשמור על שילוב של סגנונות, במיוחד לאתרים גדולים. אם האתר מיועד למטרות עסקיות וכבר יש לו מותג או סגנון משלו, יש לשלב זאת בעיצוב האתר. דברים שכדאי לקחת בחשבון בעת יצירת מדריך לסגנון דף אינטרנט:
- ניווט
- הערת ראש
- פסקה
- אופי נטוי
- דמות נועזת
- קישורים (פעילים, לא פעילים, מרחפים)
- שימוש בתמונה
- אייקון
- כַּפתוֹר
- רשימה
שלב 6. החלת סגנון האינטרנט
לאחר שתמצא את הסגנון והעיצוב הנכונים, יישם אותו. CSS היא אחת הדרכים הקלות ביותר ליישם סגנונות בדף אינטרנט או ברחבי האתר. עיין בהוראות הבאות כדי להבין טוב יותר את פרטי השימוש ב- CSS.
