וזה מה שקיבלנו…

5.png

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

6.png

עכשיו, זוכר שהזכרנו את האותיות המודגשות? Web 2.0 עושה שימוש טוב בגופנים, עדיף קל מאוד לקריאה, מעט מצויר ומודגש. התקשינו לבחור פונט מתאים והחלטנו ללכת על "Cooper Std".

7.png

אנחנו עושים כדי להוסיף צל עדין מאוד (# 5674a7) ושיפוע אור מלבן בחלק העליון (#Ffffff) לכחול בהיר (#cdd9de) ...

8.png

9.png

דֶגֶל

זה ייתן לנו עיצוב תינוק חמוד מאוד.

10.png

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

11.png

זה נראה טוב?

12.png

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

131.png

עכשיו זה נראה פרופורציונלי.

crystal_clear_app_ark2.png

דֶגֶל

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

להוריד קובץ psd