עיצוב Killer אינטרנט UI פריסות עם Freebies - Ultimate Guide

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

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

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

תרגול עם תבניות מלאות

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

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

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

מקור מקורי - הורד

עיצוב דפי נחיתה

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

מקור מקורי - הורד

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

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

תבניות נוספות:

הנה כמה תבניות PSD חינם שיצאנו במעבר:

• "ביז" אתר עסקים תבניות PSD
• "אתר ThinkPuice" אתר המוצר תבנית PSD
• אתר מקצועי PSD תבנית
• "Polo360" תבנית אתר תבנית PSD

ייתכן שתתעניין גם בנושאים הבאים:

• תבניות אתר עסקים
• "בקרוב" הדרכות דף + תבניות

אתר ניווט ראשי

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

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

מקור מקורי - הורד

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

מקור מקורי - הורד

סגנונות תפריט חלופי

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

קחו למשל את freebie התפריט להלן שתוכנן על ידי האתר Icojam.

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

מקור מקורי - הורד

עצות ניווט / הדרכות:

• 50 + נקה CSS מבוססי Tab Tab Scripts
• Breadcrumb ניווט שיטות עבודה מומלצות & דוגמאות
• בניית ניווט נייד עם jQuery
• קידוד. ניווט ב CSS3
• עיצוב ניווט עם CSS פחות

מנקה אינטרנט טפסים

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

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

שדות כניסה

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

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

מקור מקורי - הורד

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

מקור מקורי - הורד

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

אנשי קשר

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

Freebie להלן הוא דוגמה מדהימה של שימוש במרקמים וסמלים מותאמים אישית.

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

מקור מקורי - הורד

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

מקור מקורי - הורד

טפסים ליצירת קשר עם טפסים:

• טופס הרשמה / הרשמה: רעיונות ודוגמאות יפות
• יצירת טופס רישום של טופס נייר מוערם
• יצירת אייאקס מבוסס HTML5 / CSS3 טופס יצירת קשר

סרטים וכרזות

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

מקור מקורי - הורד

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

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

מקור מקורי - הורד

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

עוטף את הפינה

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

העיצוב להלן הוא 100% בחינם להורדה והוא יכול לשמש רעיונות הפרויקט שלך. אתה יכול לראות איך זה היה למשוך תשומת לב מן המבקרים ומדוע מגמה זו גדלה לתוך טירוף כזה. היזהר לא overuse את הבאנרים. בתפזורת, אלה יכולים לקבל מאוד מעצבן מאוד כמו מבוגר "Web 2.0" מבריק / מראות אפקטים.

מקור מקורי - הורד

עיצוב עם לחצנים

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

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

מקור מקורי - הורד

כיצד ליצור וריאציות

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

מקור מקורי - הורד

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

מקור מקורי - הורד

עץ + מרקמים נייר

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

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

מקור מקורי - הורד

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

28 מרקמים מעץ ברזולוציה גבוהה

סיכום

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