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

اواخر آذر ۹۰، آرش زاد، موسس و سردبیر وبلاگینا، با من در مورد طراحی مجدد وبلاگینا به مناسبت چهارمین سال تولدش تماس گرفت. بعد از توافق قرار شد که اون اطلاعات لازم رو برای من ارسال کنه و من بر اساس اون اطلاعات براش یه Sketch تهیه کنم و توی جلسه‌ی بعدیمون بهش نشون بدم. حاصل تبادل اطلاعاتی که برای اون طرح شد، ۳۶ تا ایمیل شد که توش تمام اطلاعات لازم رو من دریافت کردم.

جلسه برگزار شد و من اون Sketch رو ۴م دی‌ماه به آرش و ۱۲هم دی‌ماه به بقیه بچه‌های وبلاگینا نشون دادم و ایده‌ای اولیه رو که البته روی نسخه کتبی طرح کامل مشخص نیست، پسندیدن و من شروع کردم به طراحی با فوتوشاپ و باقی قضایا. در این نوشته قصد دارم که که مشکلات طرح فعلی رو توضیح بدم و بگم که برای حلشون چه کارهایی کردیم.

طرح قبلی وبلاگینا

طراحی قبلی وبلاگینا از دی‌ماه ۸۹ تا ۴ فروردین ۹۱ روی وب‌سایت بود. این طرح با وجود اینکه از لحاظ استفاده از HTML5 و CSS3 خیلی خوب بود، ولی با توجه به نیازهای اخیر وبلاگینا به یه مشکلاتی خورده بود و برای همین بچه‌ها میخواستن که وبلاگینا طراحی مجدد بشه. این طرح رو علی جمال‌زاده عزیز، سردبیر رادیو۲۴ طراحی کرده بود.

مشکلات طرح

• فواصل و حدود به درستی مشخص نشده بودند. عرض سایدبار بیشتر از حد لازم بود
• انتخاب فونت‌ها و سایز قلم روی خوانایی متون تاثیر گذاشته بود
• از اسلایدر می‌شد استفاده بهتری کرد
• به اندازه ی کافی در طرح فضای خالی موجود نبود
• رادیو۲۴ که بعدا به وبلاگینا اضافه شده بود، جلب توجه نمی‌کرد

طرح پیشنهادی من

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

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

طرح جدید وبلاگینا

من برخلاف خیلی از طراحای دیگه، هیچوقت نمی‌تونم کل طرح اولیه رو تو فوتوشاپ طراحی کنم و از فوتوشاپ بیشتر برای طراحی عناصر کوچیکتر استفاده می‌کنم. خیلیا با این روش مخالفن ولی خب من اینطوری راحت‌ترم. نحوه طراحی هم داخل ساختار HTML و از بالا به پایین هست. برای مثال، اول از نوار بالایی و هدر و لوگو شروع کردم و بعد به قالب اصلی سایت، بعد سایدبار، باکس‌های سایدبار، فوتر و در نهایت به محتوی رسیدم. اینطوری من می‌تونم در هر قسمت توجه کاملم رو فقط به این بخش بدم. مثلا، طراحی باکس‌های سایدبار و ساختارشون، به همراه طراحی استانداردی برای منوهای این باکس‌ها، حدود ۴ روز وقتم رو گرفت که ۱ روزش فقط برای مشخص کردن تکلیف رنگ پس‌زمینه و سایه‌شون بود. تمام بخش‌های دیگه هم دقیقا به همون صورت طراحی شدن. با توجه به اینکه وبلاگینا برای محتوی مطالب و مقالات نیاز به بخش‌های مختلفی داشت، کل پروسه طراحی ۳ ماه طول کشید و هنوز هم کامل نشده.

در حین طراحی هم گاهی با آرش حرف می‌زدم و یه اسکرین شات از بخشی که درحال کار روش بودم رو بهش نشون میدادم تا نظرش رو بهم بگه. اگر یادم باشه چیزی نزدیک ۱۵۰ اسکرین شات از بخش‌های مختلف بهش نشون دادم و اون هر سری نظرش رو به من گفته. هرچند وقت یه بار هم یه پیش‌نمایش از طرح آماده می‌کردم و به بچه‌های دیگه وبلاگینا نشون میدادم که اونا هم نظرات و پیشنهاداتشون رو به من بگن.

مشخصات طرح جدید

• تکنولوژی طراحی: CSS3 و HTML5
• فریم‌وورک سی‌اس‌اس: LESS
• فریم‌وورک جاواسکریپت: jQuery
• تطبیق خودکار (Responsiveness) برای: رزولیشن کمتر از ۱۰۲۴، تبلت (به زودی)، تلفن همراه (به زودی)
• سیستم مدیرت محتوی: Movable Type
• پشتیبانی از مرورگرهای قدیمی: اینترنت اکسپلورر ۸ و بالاتر

وبلاگینا در گذشته

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

پایان

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

موفق باشید، سالار.