وبسایت رادکام از دیرباز تا امروز

وب سایت رادکام چند روزی که با طراحی جدید بروزرسانی شده است و تغییرات عمده ای در طراحی و UI آن صورت گرفت است، علاوه بر UI و Front-End زیر ساخت سایت و دیگر پورتال های رادکام تغییرات عمده داشته است که در زیر به تشریح آن ها می پردازیم:

متد طراحی ( متریال دیزاین یا Flat Design) مسئله این است!

بحث های زیادی بر سر اینکه کدام یک را انتخاب کنیم بود از طرفی متریال دیزاین به تازگی معرفی شده بود و Flat Desgin متدی پخته تر است و میتوان به آن اعتماد کرد. اما راه چه بود در این گنگی تصمیم بر این گرفتیم تا با ترکیب این دو متد در بخش های مختلف سایت اصلی از جذابیت و زیبایی هر دو این متد ها استفاده کنیم، اما به دلیل اینکه پورتال My Radcom یک Web Application به حساب می آید و متریال دیزاین نیز با همین رویکرد به وجود آمده است در پورتال My Radcom تماما از Material Design خالص استفاده کردیم.

فونت، تایپ فیس، تایپوگرافی

تایپوگرافی در وب ایران بسیار فقیر بود اما چند سالی است که با بوجود آمدن وب فونت های بهینه این فقر کم کم از بین میرود، در غنی سازی وب فونت ها سهم زیادی را مجموعه فونت ایران داشته است، برای رادکام مسئله مهمی است که تایپوگرافی خوب داشته باشد تصمیم گرفتیم از دو Font Family محبوب در وب ایران استفاده کنیم با نام های Iran Serif, Iran Sans Serif این تایپ فیس بسیار زیبا و هوشمندانه طراحی شده اند و به دلیل داشتن Kerning هوشمند در فواصل بسیار، متن را یاری می کنند.

اما فقط فونت کافی نبود و مقیاس ها و سایز ها نیاز به یک نسبت خوب که جریان متن را افزایش دهد بود تصمیم بر این شد که با ایجاد یک Modular Scale بر اساس Golden Ration این مقیاس را بوجود آوریم که در سایز ها فواصل از آن استفاده کردیم.

ریسپانسیو بودن کمی سخت اما نتیجه شیرین

به دلیل وجود محتوای زیاد در صفحه اصلی و ماهیت Single Page داشتن این صفحه داشتن یک نمای ریسپانسیو قوی بسیار سخت بود تا این که، با رسم یک Sketch در 3 نمای Large و Medium و Mobile تصمیم بر این شد داده های صفحه را در هر نما بهینه کنیم برای مثال در موبایل اسلایدر را حذف کردیم و همچنین آیکون های بزرگ حذف یا کوچک شدند تا محتوای اصلی بیشتر به چشم بیاید.

منو را به صورت hamburger در آوردیم با اضافه کردن حالت Close برای دکمه همبرگری این حالت را به کاربر انتقال دادیم.

پارالاکس ها و JS هایی که نیازی نبود را غیرفعال کردیم که Performance در موبایل افزایش یابد.

استفاده از تمام قدرت CSS3 به جای Javascript

به جای اینکه برای انیمیشن ها از Javascript استفاده کنیم تماما و تماما از CSS3 استفاده کردیم و برای هیچ جلوه بصری از Javascript استفاده نکردیم و کاربرد Javascript اکثرا در Functionality ها و Ajax است.

رنگ، تصویر، حرکت

اول چیز و مهم ترین چیز Color Coding بود که در سایت اصلی با قرمز و مشکی، در پورتال My با آبی و مشکی، و در پورتال Help با سورمه ای و مشکی انجام شد. با قرار دادن مشکی برای فوتر در تمامی پورتال ها و تغییر رنگ هر وبسایت حس یکجایی را به کاربر انتقال دادیم. همچنین برای همسو کردن Color Coding، استایل های فوتر هم یکسان در نظر گرفته شد.

تصویر ها نیز متناسب با محتوا یکسان و جذاب انتخاب شدند حتی در جاهایی برای انتقال مفهوم صحیح، از آیکون های Flat در سایز بزرگ استفاده کردیم که این آیکون ها اختصاصا برای رادکام طراحی شدند.

برای حسن ختام این نوشتار سری بر نسخ قبلی سایت رادکام میزنیم برای دیدن در سایز بزرگ روی عکس ها کلیک کنید.

سال 1383