עיצוב תוכן אינטנסיבי פריסה טיפים ודוגמאות

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

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

דפי אינטרנט מותאמים אישית

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

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

פריסת Wireframe

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

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

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

מרחב לבן מבריק

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

הסעיפים ואת כותרות הדף הם מקום נהדר להתחיל עם התאמות אישיות. באמצעות מאפייני CSS אתה אמור להיות מסוגל לתפעל את השוליים החיצוניים ואת ריפוד כל אלמנט טקסט שורה בלוק. אלה כוללים את כל הכותרות 1-6, פסקאות, blockquotes, רשימות, preformatted טקסט, ועוד כמה אלמנטים פחות.

אם אתה רוצה להחזיק את תשומת הלב של הקורא שלך, חשוב להחיל ריווח מתחת אלמנטים טקסט מרכזיים. סעיפים ופחות כותרות פועלים בצורה הטובה ביותר עם שולי תחתית 15px-25px במקום. עבור רכיבי דף גדולים יותר כגון h1 או h2 שקול 35px + (זה יהיה תלוי גם בגודל הגופן שלך). רווחים בין אלמנטים אנכיים חשובים עבור גלילה ו "ב-במבט אחד" סריקה. למרות זאת גובה קו הוא מאפיין CSS חשוב נוסף שמשפיע על המרווח בין השורות באלמנט טקסט. הסעיפים צריכים להיות הרבה יותר גדול ערך גובה קו לעומת גודל הגופן שלהם אז יש הרבה ריפוד נוסף בין השורות.

שקול סגנונות דינמיים

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

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

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

לנצל תפריטים נפתחים

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

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

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

תצוגות תוכן לתוכן

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

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

אסטרטגיות תוכנית ביסודיות

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

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

7 דוגמאות לאתרים בעלי תוכן כבד

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

לחצן

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

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

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

לורד סביר

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

מיקרוסופט

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

ארץ מנוע חיפוש

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

הבית הלבן

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

פורטל יאהו

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

סיכום

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