قالبی نو بر تن پیکسلر !


مهدی خدادادی - ژوئن 6, 2012 - 7 دیدگاه

زمان تقریبی برای مطالعه: ۶ دقیقه

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

 

مشکلات قالب قبلی چه بود ؟

 

مشخص نیودن هدف سایت :

به گفته دوستان زیادی سایت پیکسلر پیش از این هدف روشنی نداشت . به این معنی که سایت مشخص نمی کرد که شما با یک استودیو متشکل از یک تیم طرف هستید ، یا اینکه سایت ، یک سایت شخصی است . همینطور این ایهام در مورد بخش کارها و برخی از نوشته ها وجود داشت . بعد از گذشت یک سال و اندی از کار سایت روند کاری سایت پیکسلر تقریبا برای من مشخص شد ؛ در قالب جدید خواهید دید که پیکسلر یک “وبلاگ/ وب سایت” شخصی است که منعکس کننده نظرات و کارهای نویسنده آن است .

عدم یکپارچگی در عناصر UI :

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

مشکلات فنی :

قالب قبلی از روش های درستی برای تفکیک بخش نوشته ها و کار استفاده نمی کرد . به دلیل عدم آشنایی من با custom Post در وردپرس ، قالب قبلی کدی پیچیده برای تفکیک بخش ها داشت که گاها باعث بروز خطا در برخی از “برچسب ها” و یا “موضوعات” می شد . هیمنطور برخی از کد های جاوا اسکریپت بهینه نبودند .

 

قالب جدید چگونه شکل گرفت ؟

 

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

طراحی :

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

قالب جدید هم مثل قالب قبلی ساختاری کمینه گرا ( minimal ) داشت . در قالب جدید حتی سایه ها را هم حذف کرده و سعی نمودم به وسیله رنگ ها سایت را شکل دهم . رنگ اصلی سایت طیفی از سیاه و سفید است و یک رنگ مکمل آن را کامل می کند . رنگ مکمل اصلی سایت قرمز مایل به صورتی (Magenta) است . البته سایت در چهار رنگ طراحی و کد نویسی شده است . احتمالا در آینده متناسب با برخی از مناسبت ها رنگ های دیگر را نیز خواهید دید .

رسم بر این است که طراحان وب معمولا از فوتوشاپ برای طراحی رابط استفاده می کنند ؛ به این مرحله  آماده سازی فایل [۱٫ PSD پسوند فایل هایی است که توسط نرم افزار فوتوشاپ ایجاد می شوند .]PSD می گویند .
من نیز در این مورد استثنا نیستم و قالب جدید را به وسیله نرم افزارهای فوتوشاپ[۲٫ Adobe Photoshop نرم افزاری برای کار بر روی تصاویر Bitmap است که به یک خرده فرهنگ بین طراحان و عموم مردم تبدیل شده است . ] و البته ایلیستریتور [۳٫ Adobe Illustrator نرم افزاری بسیار قدرتمند برای کار بر روی تصاویر برداری است . ]اجرا کرده ام . در زیر تصاویری از فایل PSD قالب جدید می بینید :

 

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

کدنویسی :

در این مرحله ،  “طرحی” که وجود دارد باید به مقادیری کد تبدیل شود تا مرورگرها بتوانند آن را به درستی نشان دهند . معمولا در تبدیل طرح به Html/Css همینطور که گفتم تغییرات جزیی نیز در طرح ایجاد می کنم . قالب جدید طبق استاندرادهای مدرن وب کار شده است . به همین دلیل مرورگری مثل مرورگر IE و برخی از مرورگرهای قدیمی سایت را درست نشان نمی دهند . اگر شما هنوز هم از Internet Explorer برای وب گردی استفاده می کنید ، بهتر است به فکر تغییر یا حداقل ارتقا آن باشید . معمولا سفارش دهندگان به طراحان وب توصیه می کنند که وب سایتی که طراحی می شود با همه مرورگرها به خصوص IE هماهنگ باشد . اما در این مورد خاص چون سفارش دهنده و طراح یکی بوده ، ترجیح دادم حمایت از IE را در دستور کار قرار ندهم .
فریم ورکی که برای Css سایت استفاده شده است ، توییتر bootstrap است . البته تغییرات زیادی در فریم ورک دادم و بخش هایی از آن را نیز حذف کرده ام . در نهایت همه فایل های CSS فشرده شدند .

قالب قبلی برای فونت ها از کتابخانه جاوا اسکریپت Cufon استفاده می کرد . مرتضی دوست خوبم در استودیوی آورتا این کتابخانه را تحت نام بیفون فارسی کرده اند . بنا به دلایلی ترجیح دادم تا قالب جدید از همان font-face استفاده کند .

سایت از “سیستم مدیریت محتوا”  ” وردپرس” استفاده می کند . همینطور بخش هایی از قالب را با PHP نوشته و به ورد پرس اضافه کردم . از Gzip و LazyLoad هم برای بهینه کردن سرعت سایت استفاده شده است .

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

در نهایت :

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

 

——————————————

مطالب مرتبط

7 دیدگاه

  1. مککار

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

  2. misagh jafari

    سلام اقای خدادادی میشه قالبتون رو در اختیارم بذارید با حق کپی رایتتون باور کنید وضعیت مالی خوبی ندارم اما احتیاج به چنین قالبی دارم حالا بخواید ی مقدارم تا اونجایی ک بتونم پولش رو حساب میکنم/

    • سلام آقای جعفری
      قالب پیکسلر برای این سایت طراحی شده و به لحاظ برندینگ درست نیست که بر روی چند سایت دیده شود . شما اگر نیاز به قالب دارید ، بنده برای شما قالب طراحی می کنم و بحث مالی در این مورد مطرح نیست . به من یک ایمیل بزنید : me@pixeler.ir

  3. سلام اگه مشکلی مالی نیست یکی می خواستم قالب برای این سایت
    با تشکر

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

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *