پروژه ریدیزاین وب سایت ثبت نام مجتمع علامه طباطبایی

یکی از جالب ترین پروژه‌های که انجام دادم همین ریدیزاین وب سایت ثبت نام بود. برای طراحی این پروژه هیچگونه پیشنهادی برای نوع دیزاین، ترکیب رنگ و یا غیره از طرف مجموعه علامه طباطبایی نبود. تنها سه عکس اصلی دانش آموزان باید در طراحی جدید استفاده میشد. مدت زمان صرف شده برای چهار صفحه طراحی مجدد حدودا ۱۰ ساعت بود.

ریدیزاین وب سایت ثبت نام: صفحه اصلی

برای بکگراند سه تصویر از گرادینت و ترکیب رنگ سرد استفاده کردم و برای جلب توجه بیشتر CTA رنگ گرم بکار بردم.
آیکونها ساده‌تر و مفهومی انتخاب شدند تا منظور رو بهتر و واضح‌تر به کاربر برسونن. گرید ۸px هم مثل همیشه برای زیبایی بیشتر بکار گرفتم. بک گراند صفحات رو هم با یه پترن با طرح آموزشی و سبک (برای اینکه به سرعت لود سایت ضربه نزنه) پر کردم که طرح خیلی خالی به نظر نرسه.

صفحه ورود و ثبت نام

طراحی قبلی بر اساس بوتسترپ بوده و همونطور که مشاهده می کنید ترکیب رنگی نامناسب و چیدمانی نه UI و نه UX محور دارن. جز خسته شدن چشم و گیج شدن کاربر نتیجه‌ای نداشته. پس سعی کردم تا طراحیم ترکیب رنگ و چیدمان UX محور در عین اینکه UI هم در نظر گرفته بشه، داشته باشه.

سمت راست صفحه رنگ گرم داره و بخش بزرگتری رو در اختیار داره، چون هدف ثبت نام کاربر جدیده. خب به همین علت ۲/۴ صفحه و ترکیب رنگی فعلی رو بهش اختصاص دادم. همچنین تصویری رو در نظر گرفتم تا جذابیت بصری بیشتری داشته باشه. در مقابل بخش سمت چپ که برای ورود کاربر قدیمی هست، ۱/۴ فضا و ترکیب رنگ سرد رو داره.

کلمه ” راهنمای سامانه ” رو به ” ویدیوی راهنمای ثبت نام ” تغییر دادم. چون ممکن بود کلمات اشتباه گرفته بشن و با توجه به محتوای دکمه صفحه قبل، کاربر روشون کلیک نکنه.

جای گذاری اشتباه دکمه ” رمز عبور رو فراموش کرده‌ام ” رو تصحیح کردم. نوع اون رو تغییر دادم و سایزش رو کوچکتر کردم تا به نسبت دو CTA جلب توجه کمتری داشته باشه.

برای Input Box هم آیکون در نظر گرفتم و هم لیبل تا UI و UX بهتری داشته باشیم.

پاپ آپ راهنما و اطلاعیه ها

برای پاپ آپ اطلاعیه ها و دفترچه‌های راهنما بلور شدن بک گراند و انتخاب تصویر دانش آموز (با عدم نگاه مستقیم به دوربین که تفاوت با ۳ تصویر اصلی رو نشون میده) رو برای جلب توجه بیشتر به کار بردم.
برای آیتم‌ها بر اساس جنسیت و مقطع ترکیب رنگ جداگانه و مرتبط و برای دکمه خروج هم رنگی رو بر خلاف CTA اصلی استفاده کردم که همگی سرد هستن.

نهایتا کافیه فقط تصاویر قبل و بعد رو با هم مقایسه کنید تا متوجه UI و UX بهتر در ریدیزاین انجام شده بشید.
در ضمن فایل فیگما پروژه هم موجوده، در صورت درخواست توسط شما لینک مشاهده فایل رو براتون ارسال می‌کنم.

لینک صفحه که برنامه نویس مجموعه اجرا کرده رو هم اینجا می‌تونید ببینید.