وبلاگ داتیس دیزاین

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

درباره وب سایت

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

• مشاهده وب سایت فعلی

ساختار قبلی وب سایت

این وب سایت در نسخه قبلی خود به صورت 2 ستونه طراحی شده بود و عرض آن 850 پیکسل بود، هدر آن تقریبا نزدیک 220 پیکسل بود که در رزولوشن 1024×768 حجم زیادی از فضای مرورگر رو اشغال می کرد. در صفحه اصلی فقط لیست اخبار وب سایت به صورت خلاصه قرار می گرفت و در ساید بار هم تعدادی لینک و مشخصات مختلفی نمایش داده می شد. نمایی از صفحه اول نسخه قبل را در زیر مشاهده می کنید :

همانطور که در شکلهای بالا می بینید عملا فضای مناسبی برای صاحبان وب سایت وجود نداشت که بتوانند اطلاعات بیشتری غیر از مواردی که در سایت وجود داشت را نمایش بدهند.

دلایل نیاز به طراحی مجدد

دلایل نیاز به طراحی مجدد رو میتونم به این صورت بیان کنم :

• عدم موجود بودن فضای مناسب برای قراردادن اطلاعات اضافی همچون فراخوانها
• عدم استفاده بهینه از فضای مرورگر در رزولوشن 1024×768
• نیاز صاحبان وب سایت به معرفی سرویسها و خدمات وب سایت به کاربران در صفحه اول
• نیاز به داشتن 3 ستون
• بهینه کردن نحوه نمایش اخبار وب سایت
• قراردادن بنرهایی برای معرفی بخشها و سرویسهای مهم سایت
• بهینه کردن ساختار فونتها و نمایش بهتر هدرها و تصاویر
• برطرف کردن اشکالات جزیی اینترفیس سایت
• بهینه کردن منوی وب سایت

خب حالا مراحل تغییرات رو توضیح میدم :

تغییر هدر سایت

همانطور که گفتم اندازه هدر سایت با توجه به حجم اطلاعاتی که در وب سایت قرار داره بزرگ بود و فضای زیادی رو از مرورگر اشغال می کرد و کاربران تقریبا نصف صفحه رو از دست می دادند و مجبور بودن برای خواندن مطالب بیشتر به پایین وب سایت اسکرول کنند. هدر قبلی وب سایت را در شکل زیر می توانید مشاهده کنید :

به دلایل فوق مجبور شدیم ارتفاع هدر را کمتر کنیم و فضای بیشتری را در اختیار مطالب سایت قرار دهیم، همینطور تغییراتی در دیزاین هدر و منوها ایجاد شد. هدر جدید سایت در شکل زیر قابل مشاهده است :

توسط این تغییر تقریبا 100 پیکسل به فضای قابل استفاده ما اضافه شد که فضای قابل توجهی است.

تغییر مکان و اندازه جستجوی منابع کتابخانه

همانطور که در شکل زیر مشاهده می کنید محل جستجوی منابع کتابخانه در جای مناسبی قرار ندارد، کاربران عادت کرده اند که جستجو در سایدبار سایت قرار داشته باشد. همچنین اندازه این سرچ بار خیلی بزرگ بود و فضای زیادی از سایت را اشغال کرده بود و عملا توجه کاربر را از فعالیت اصلی سایت به سمت خود جلب می کرد :

به همین دلیل تصمیم گرفتیم که این سرچ را به سایدبار منتقل کنیم و اندازه آن را کوچک تر و ساختار آنرا بهتر کنیم، در نهایت فضای بیشتری را در اختیار مطالب سایت قرار دادیم و کاربران هم راحت تر سرچ را پیدا می کنند :

اضافه کردن اینترو و بنر

یکی از دلایل ریدیزاین این وب سایت همانطور که گفتم عدم وجود فضا برای صاحبان وب سایت جهت معرفی سرویسهای مهم وب سایت بود. به همین دلیل و با توجه به اینکه 100 پیکسل از هدر کم کردیم فضای مناسبی برای قرار دادن این موارد بوجود آمد، با قرار دادن این هدر توجه کاربر را به سمت خودش جلب خواهد کرد و یکی از اهداف سایت که معرفی این سرویسها هست را برآورده خواهد کرد :

این اینترو 3 تا از سرویسهای مهم این وب سایت را به کاربر معرفی می کند.

همچنین بنری برای قسمت جدید سایت هم در کنار این اینترو اضافه شد که وظیفه معرفی نگارخانه یا همان گالری عکس وب سایت را دارد که بار هر بار ریفرش صفحه یک عکس به صورت تصادفی نشان می دهد :

3 ستونه کردن سایت

سایت قبلی به صورت 2 ستونه بود که فضای نسبتا زیادی را برای اخبار سایت استفاده می کرد، در مرحله اول عرض سایت را از 850 پیکسل به 960 پیکسل افزایش دادیم، چون این سایز در رزولوشن 1024×768 هم به خوبی نمایش داده می شود.

ستون سمت راستی که اخبار را در خود جای می دهد 50 درصد از کل عرض را در اختیار دارد، در مرحله بعد یک ستون بین ستون اخبار و ساید بار هم اضافه شد که وظیفه نمایش دادن فراخوانها و سایر مطالب سایت که در الویت کمتری هستند را دارد. در شکل زیر می توانید مشاهده کنید :

بهینه کردن نمایش اخبار

تفاوت نمایش اخبار در نسخه قبلی و فعلی را در شکلهای زیر مشاهده می کنید :

همانطور که مشاهده می کنید در نسخه جدید هدر سایت به صورت رنگ ساده ای درآمده است که خونایی آنرا بیشتر می کنید همچنین اخبار از حالت 2 ستونه بودن به 1 ستونه تبدیل شده اند و border تصاویر هم از مشکی به رنگ خاکستری تبدیل شده و نازکتر شده است.

نمایش فراخوانها و اطلاعیه های وب سایت

با اضافه کردن یک ستون بین اخبار و سایدبار فضایی برای قرار دادن مطالبی همچون فراخوانها و اطلاعیه های وب سایت و مطالبی که الویت کمتری دارند ایجاد شد :

تغییرات سایدبار

در قسمت سایدبار هم علاوه بر سرچ که قبلا گفته شد ، بنرهایی برای معرفی قسمتهای مختلف وب سایت به کاربران ایجاد شده است :

آرشیو اخبار

همانطور که در شکل زیر مشاهده می کنید آرشیو اخبار در نسخه قبلی بدین شکل بوده است :

که با تغییرات جزیی سعی شده است به خوانایی و کاربرپسند شدن آن اضافه شود :

در پایان …

امیدوارم توضیح این مراحل براتون مفید باشه، البته میدونم که ممکنه اشکالهایی هم وجود داشته باشه که خوشحال میشم نظرات و دیدگاهتون رو برام بنویسید.

در پایان هم از مدیریت شرکت دریای نور تشکر می کنم که این امکان رو به من دادند بتونم برای پروژه شرکتشون مراحل ریدیزاین رو در وبلاگم توضیح بدم.

مشاهده وب سایت جدید