עיצוב חדש לאתר
Adobe XD
היי
התחלתי ללמוד UX/UI ולאור התקופה האחרונה שהאתר עובר שינויים וחידושים החלטתי להשתעשע עם הרעיון לתת לאתר עיצוב טיפה שונה אבל עדיין לשמור על התפעול המוכר והאהוב שאנחנו רגילים אליו.
עיצבתי רק את העמוד הראשי ללא כל שאר תתי הקטגוריות ושמתי כמה פוסטים רנדומליים שהיו פה באתר.
אני יודע שאני בתחילת דרכי ושעדיין יש בעיצוב דברים לא מושלמים אבל הייתי שמח על הדרך לקבל קצת ביקורת בונה.
*הפוסט מאושר ע"י גל.
*העמוד בקישור לא נפתח במסך מלא כי זה רק פרוטוטייפ ולא באמת אתר פעיל ולכן תאלצו לדמיין שזה אתר ברוחב מלא 😅.
*העיצוב הוא חלק מפרוייקט למידה עצמית ונעשה למטרות לימוד.
*מותאם רק לדסקטופ ולא לטלפון.
https://xd.adobe.com/view/5a4f00d5-8e20-4b3a-a5d8-78de15796fa0-0f1c/?fullscreen&hints=off
לפרטים נוספים
פרטים נוספים ב- Adobeהמחירים ותנאי המבצע נכונים למועד הפרסום (28.07.2020). המחיר בחנות עשוי להשתנות.
הסתיים
תגובות
@|סמואל תודה על התגובה
אני יכול להבין מה אתה אומר על האלמנטים של הדבורים, אבל לדעתי זה מוסיף קצת אופי לאתר. מעניין אותי לשמוע מה עוד אנשים חושבים על זה
בנוגע לצבעים - העיצוב הנוכחי של האתר גם מאוד בהיר, אבל סתם בשביל הספורט הוספתי גם DARK MODE, לדעתי נראה לא רע.
הנוגע ל"דיל הסתיים" - לקחתי לתשומת ליבי, מבין מה אתה אומר. עידנתי את זה גם קצת.
מוזמן להציץ בשינויים החדשים :)
https://xd.adobe.com/view/5a4f00d5-8e20-4b3a-a5d8-78de15796fa0-0f1c/?hints=off
@|DavidShalom77 אתה מדבר על העיצוב של האתר. אני דיברתי על העיצוב פרוטוטייפ שעשיתי
ככה זה נראה אצלי בשלושת הדפדפנים הגדולים (firefox, edge, chrome)
@|Ben_Hen
נראה עיצוב מעניין.
אני אישית פחות מתחבר אליו מהסיבה שיש יותר מידי אלמנטים של דבורים וזה נראה לי יותר כמו אתר לילדים מאשר אתר לדילים. אני יכול לראות את זה עובד יפה באתר של משחקי מחשב/סלולאר לילדים.
מבחינת הצבעים, יש המון לבן וצהוב-קרם, זה בהיר לי מידי בעיניים. אין לי אופציה להפוך את זה ל-Dark Mode לראות איך זה ייראה באפורים-שחורים ואני אישית לא אכנס לאתר בהיר אלה אם אני מוכרח ובטח לא בתדירות גבוהה.
אולי כבר כתבו קודם, לא עברתי על כל התגובות. בשונה משלט של מתווך שרשום "נמכר", שם זה מקרין על עבודת המתווך, דיל שהסתיים לא אומר כלום על האתר או על טיב הדיל. חשוב שיהיה סימון כלשהו לכך שהדיל הסתיים, אך איך שהוא מופיע כרגע, הוא בולט מידי לדעתי. הוא מושך יותר תשומת לב מכל המשבצות מסביבו.
אין לי ידע בתכנון אז אין לי מה לרשום בנוגע לזה.
@|DavidShalom77
הסימון יכול להיות שימושי, אני קצת מתקשה לראות איך אפשר לסמן את המשבצות תוך שמירה על מראה טוב של העמוד.
בפורומים ובג'ימייל למשל, מייל חדש מופיע בבולט ואחרי שנכנסים אליו נעלם הבולט. כאן יש משבצות, גדולות וקטנות, הסימונים אם זה במסגרת או בצבע של המשבצת יהיו בולטים הרבה יותר וזה ייראה מוזר או כמו לוח שחמט.
תוסיף כפתור אנטי מחיקון..
@|DavidShalom77 איפה אתה רואה שמונה? הוספתי תמונה עם מספור.
בנוגע לפיצ'ר - אחלה רעיון.
אם יעניין אתכם אנסה להוסיף משהו כזה לעיצוב
אני עדיין רואה שמונה
משהו שבאמת חסר לי ומעניין אם היה אפשר להוסיף
אני מבקר בכוורת לפחות 3-4 פעמים ביום דרך המחשב בלבד
הייתי שמח אם בכל פעם שאני נכנס, הדילים החדשים / עם תגובות חדשות יהיו מסומנים בצורה מסוימת (או להיפך, אלו שלא התעדכנו מהפעם האחרונה). מה שקורה היום, זה שדילים מעודכנים קופצים למעלה (שזה מצוין!), אבל אני לא יודע אם אילו שבשורה הרביעית-חמישית הם ישנים ללא תגובה חדשה או שסתם הגיבו עליהם בדיוק אחרי שיצאתי מהאתר והם נדחקו למטה.
@|DavidShalom77 מסכים איתך, לכן בעיצוב שעשיתי צימצמתי את מספר הדילים שיש במסך
עשיתי מקסימום 6 דילים לרוחב (במקרה שיש דיל חם הוא תופס מקום של 4 דילים. 2 בכל שורה)
8 דילים לרוחב (במחשב) זה יותר מדי בשבילי
אני עובר עליהם מימין לשמאל ומתחיל לאבד כיוון
יחד עם 4 שורות, זה כמעט 30 דילים למסך
@|galr52 תודה
בהזדמנות אעבוד על האנימציות
הייתי מנסה אולי לרווח קצת בין הדילים.
את הקו של המסגרת של כל דיל הייתי משנה, כאילו מבליט כל ריבוע עם צל בקטנה שיתן נפח לכל ריבוע. וכשעומדים על ריבוע מסויים קצת להגדיל אותו.
זה לא css
Adobe XD
הבנתי , אז הוא בעצם עושה לך CLONE לוקאלי
ואתה משנה את העיצוב ממש CSS ?
עם איזה תוכנה אתה משתמש ?
זה לא באמת אתר פעיל. זה פרוטוטייפ. נטו עיצוב. אי אפשר ללחוץ על דברים.
ברגע שאני מסיים לעצב בתוכנה יש לי אפשרות ליצור לינק לשיתוף, וכל פעם שאני רוצה לעדכן אני רק צריך ללחוץ בתוכנה על Update link וזה מעלה מחדש לאותו לינק עם השינויים שביצעתי.
יש לי אפשרות להפוך את זה לכאילו אתר מתפקד עם אנימציות וטריגרים של לחיצות אבל עוד לא הגעתי לשלב הזה 😛
העיצוב נשמר לך גם בכניסה הבאה לאתר ?
איך עשית את זה ?
הוספת extension שיזריק עיצוב בכניסה לאתר ?
העתקת את האתר למצב OFFLINE ושינת עיצוב ?
ביצעתי עדכון קטן
הוספתי עמודה וצימצמתי את הרווחים בין העמודות ומהשוליים
ושיניתי את ההמבורגר
@|liory83 תודה :)
בהנחיות שהבאתי לעצמי היה לי חשוב לשמור על הקונספט של האתר כמו שהוא.
יש לי כל מיני רעיונות אבל תכלס, העיצוב הנוכחי דיי מייחד את האתר ולא רציתי לבוא ולשנות את כל הסגנון
היי, מאוד אהבתי את התפריט העליון במיוחד שנתת צבע רקע נעים לעין.
לגבי החלק התחתון של הפוסטים אני חושב שצריך לצאת מהקופסה ולקחת את זה לכיוון אחר לגמרי.
למשל:
1.הייתי מוסיף למעלה קטגוריות מתחת לתפריט שמסננות כדי שיהיה יותר נוח לעין למשל קטגוריה של הדילים החמים - האתר היה ממוין אך ורק לפי דילים חמים וכן הלאה.
2. יכול להיות שהייתי משנה את הצורה של הפוסט שייתן יותר ייחודיות לאתר.
אני מבין שזה רק לדוגמה ויכול להיות שיש לך עוד מלא רעיונות יצירתיים.
@|Or172 תודה רבה.
כמובן שאני יודע מה זה רספונסביות וכמה זה חשוב. בניתי בנוסף אתר לעסק של אשתי שמשתנה בהתאם לגודל מסך (דסקטופ, טאבלט ומובייל).
את העיצוב לבי.דילס עשיתי בתוכנת XD שזו תוכנה לפרוטוטייפים ויש אופציה של רספונסביות אבל עוד לא הגעתי לזה :)
כל הכבוד! זאת הדרך להתקדם ולהכנס לתחום, להציע לבעל אתר עיצוב לאחר שכבר עשית הכל זה רעיון מעולה. כל הכבוד.
רספונסיביות זה דבר מאוד חשוב, אז אם לא עשית כי לא היה לך כח זה בסדר, אבל אם זה כי אתה לא יודע כדאי שתתמקד ותלמד את זה, היום כל אתר דורש רספונסיביות וקו אלמנטים שאתה מעצב צריך להמשיך ולהיות דומה גם במובייל. מבחינת העיצוב עצמו מאמין שאחרים יעירו אני פחות מבין בזה (אנוכי מפתח FE).
מגניב :)
פחות התחברתי..
אבל כל הכבוד על המחשבה.. בהצלחה!
@|borges136 קיבלתי, תודה :)
ביקורת בונה:
תפריט ההמבורגר למעלה מימין נראה מוזר, הרבה מאוד רווח מהפסים
הרוחב של התוכן כדאי שיהיה כמו הרוחב של ה-header, כרגע התוכן טיפה צר יותר וזה קצת משונה
סה"כ שאפו, יפה מאוד לטעמי
לחיצה על מידע נוסף תעביר לעיצוב המלא.
בגדול זה יותר מתיחת פנים לעיצוב הנוכחי והבדלה בין דיל חם לדיר שהסתיים
שלח תמונה יותר מוגדלת, ותפרט מה כביכול שינת.. בגודל נראה אחלה