نه هر که چهره برافروخت دلبری داند

۲۷ تیر ۱۳۹۲

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

چرا تغییر ؟

قالب قبلی ، قالب خوبی بود ، منحصر به فرد و زیبا بود و تقریبا همه افراد از آن رضایت داشتند . اما معایبی داشت که مرا به فکر انداخت به جای مرتفع کردن این معایب ، قالب را دوباره طراحی کنم . یکی از مهم ترین ایرادهای قالب قبلی این بود که responsive نبود۱ . همینطور به نظرم سایت می توانست با چیدمان مناسب تر اطلاعات باز هم کمینه تر و بهینه تر شود .

پس شروع کردم بر روی رابط کاربری آن کار کردم . طبق معمول من ابتدا کار را درPhotoshop  دیزاین می کنم . تصویر زیر اولین طرحی بود که در این مورد کار کردم :

طرحی-از-قالب-پیکسلر

در نهایت این طرح تغییر کرد و به طرح زیر رسیدم :

pixeler-redesign-2

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

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

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

تک رنگ به کار رفته در سایت به ملامیت و به طور غیر محسوسی تغییر رنگ می دهد .ابتدا برای اجرای این ایده دست به دامن جاوا اسکریپت شدم . نتیجه کار رضایت بخش بود و من کنترل خوبی روی تغییر دامنه رنگ ها داشتم . می توانستم طبق الگوریتمی رنگ های تصادفی نزدیک به هم را ایجاد کنم یا اینکه رنگ های متناسب با هم را از Kuler فراخوانی کنم . اما مشکل بزرگ جاوا اسکریپت مانع از این شد که من بتوانم ایده ام را به راحتی پیاده سازی کنم . زمانی که تعداد اشیا رنگی در صفحه بالا می رفت ، به شدت سرعت (Performance)  سایت پایین می آمد و مصرف CPU بالا می رفت ، به گونه ای که استفاده از سایت با کندی شدیدی همراه می شد .

از اجرای این ایده نا امید شده بودم که یکی از دوستان پیشنهاد داد از Css-Animation استفاده کنم . همینطور هم شد . هر چند انیمیشن در CSS مبحث نسبتا جدیدی است و مرورگرهای قدیمی از آن پشتیبانی نمی کنند ، اما به شدت سرعت خوبی دارد و هر میزان اشیای رنگی هم که در صفحه داشته باشید ، سرعت کار ما را کم نخواهد کرد . این قابلیت تغییر رنگ در مرورگرهای قدیمی در دسترس نیست ، پس اگر شما رنگ ثابت آبی را در سایت می بینید نسبت به تعویض یا ارتقا مرورگر خود اقدام کنید .

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

در کد نویسی سایت سعی کردم تجربه های جدیدی داشته باشم . پس به سراغ Sass برای سامان دادن CSS ها و Haml برای کد کردن Html رفتم . البته استفاده از این فریم ورک ها تجربه موفقی بودند و دیگر در تمام پروژه ها آنها را به کار می گیرم .

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

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

امید دارم که تغییر قالب باعث شود که مطالب بهتر ، بیشتر و با کیفیت تری در آینده در سایت ببینیم .

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

۱۶ دیدگاه برای "نه هر که چهره برافروخت دلبری داند"

  • Navid گفته است: تیر ۲۸, ۱۳۹۲ در ۱:۵۳ ق.ظ

    به معنای واقعی کلمه در طراحی رابط گرافیکی استاد هستید.

    پاسخ
  • Milad گفته است: تیر ۲۸, ۱۳۹۲ در ۷:۴۶ ق.ظ

    سایت از لحاظ راندمان و سرعت فوق العاده شده و بسیار بهتراز قالب قبلیست..
    مطلب را که میخواندم به نظرم طرح اولیه زیباتر از طرح دومیست که از آن العام گرفته شده..چون در رزولوشن های پایین همچون ۱۰۲۴در۷۶۸ مطالب و آیکن ها بسیار بزرگ نمایش داده میشوند سپاس

    پاسخ
    • مهدی خدادادی گفته است: تیر ۲۸, ۱۳۹۲ در ۱۱:۳۹ ق.ظ

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

      پاسخ
  • شهاب احمدی گفته است: تیر ۲۸, ۱۳۹۲ در ۱۰:۴۳ ق.ظ

    سلام دوست خوبم تبریک!
    به حق که قالب چشم نوازی طراحی کردید.
    پیشنهادات من برای بهینه تر شدن قالب:
    ۱- غلط املایی در بخش ” برنده تندیس جشنوراه وب ایران” اصلاح شود به “برنده تندیس جشنواره وب ایران”
    ۲- فاصله گزینه های منو ” وبلاگ درباره تماس” از هم بیشتر شود.
    ۳- گزینه “وبلاگ” به “خانه” یا “صفحه نخست” نغییر نام دهد.( از نظر من کمی مبهم است گویا وبلاگ جدا از محتوای فعلی است.)
    ۴- در “بخش تماس” دکمه “ارسال” نوشته تیره و پشت زمینه تیره دارد که جلوه خوبی ندارد؛ پیشنهاد: تمام دکمه های سایت از یک استایل پیروی کنند. نمای دکمه های “Pagination” به دکمه “ارسال” هم داده شود.
    ۵- لوگو پیکسلر کمی کوچکتر شود به رنگ سفید تغییر کند و هنگام اسکرول، نوار منو و لوگو کمی کوچک شود، مثل وب سایت http://www.ibm.com/us/en
    ۶- در بعضی قسمت ها مثل منو و تیتر پستها، در حالت Hover از CSS Transition برای لطافت در کار استفاده کرده اید که بسیار هم بجا بوده، این لطافت در Pagination و بعضی از قسمت ها به چشم نمی خورد، نظر من این است که این لطافت یا نباشد یا برای تمامی عناصر، استفاده شود.
    ۷- در مرورگر Google Chrome در بخش “نظرات” “مرا از سایر دیدگاه ها به وسیله ایمیل ، آگاه کن .” تیک نمی خورد.

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

    پاسخ
    • مهدی خدادادی گفته است: تیر ۲۸, ۱۳۹۲ در ۱۱:۳۳ ق.ظ

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

      پاسخ
  • محمد گفته است: تیر ۲۸, ۱۳۹۲ در ۱۲:۳۰ ب.ظ

    سلام
    سایت http://www.behance.net/ و http://www.flickr.com/
    فیلتره !!!!!

    پاسخ
    • مهدی خدادادی گفته است: تیر ۲۸, ۱۳۹۲ در ۱۲:۳۶ ب.ظ

      بله دوست عزیز ، بنا به دلایلی که برای حقیر روشن نیست این دو وب سایت پالایش شدند .

      پاسخ
  • سعید گفته است: تیر ۲۸, ۱۳۹۲ در ۱:۳۸ ب.ظ

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

    پاسخ
    • مهدی خدادادی گفته است: تیر ۲۸, ۱۳۹۲ در ۳:۱۵ ب.ظ

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

      پاسخ
  • pouya گفته است: تیر ۲۸, ۱۳۹۲ در ۲:۴۰ ب.ظ

    فارق =! فارغ

    پاسخ
  • مهدی رسولی گفته است: تیر ۲۹, ۱۳۹۲ در ۶:۱۴ ق.ظ

    خیلی زیبا شده ، بخصوص برای اینکه flat design عه
    البته به نظر من طراحی تخته شاید نباشه 😀
    فعلاً

    پاسخ
  • نوید گفته است: تیر ۳۱, ۱۳۹۲ در ۲:۱۶ ب.ظ

    با سلام و احترام، قالب جدیدتون هم مثل قالب قبلی خوب و به قول خودتون منحصر به فرد شده. ظرافت های جالبی را در طراحی و کدنویسی موارد ساده ای مثل hover و … درنظر گرفتید که به زیبایی سایت اضافه کرده، اما در کل چند مورد هست که فکر می کنم درصورت اصلاح باعث بشه که سایتتون جلوه بهتری پیدا کنه:
    ۱٫ در page هایی که مطالب سایت لیست می شود (blog) وقتی که عنوان مطلب طولانی باشه و ماوس روی اون قرار بگیره، بخشی از عنوان به خط بعد منتقل میشه (درحالیکه جایی برای اون درنظر گرفته نشده) درصورتی که بهتر بود عنوان کوچکتر میشد و در همان خطی که هست دیده میشد.
    ۲٫ در سایدبار، و قسمتی که مطالب جدید و تصادفی را نشان میدید، یکی از تب ها به پایین افتاده (تب “پیوندهایی که دوستشان داریم”)، جلوه خوبی نداره و فکر می کنم بهتر باشه اندازه تب ها را کوچکتر کنید تا همگی در یک سطر دیده بشن (البته شاید در مرورگرهای دیگه این اشکال دیده نشه؛ بنده از کروم استفاده می کنم).
    ۳٫ در دو طرحی که قرار دادید، در طرح نهایی، اسمتون را به جای “بسم الله” در طرح اول قرار دادید … :دی
    ۴٫ در طرح جدید خبری از لینک مجزا برای نمایش مجموعه “موضوعات” و “برچسب ها” نیست (یا شاید بنده پیدا نکردم!)، در حالیکه در طرح اول در بالای پست ها قرار داشت.
    ۵٫ با توجه به اینکه در برخی مرورگرها (مثل کروم) فونتهای فارسی که توسط font-face استفاده می شوند در اندازه کوچک خوانایی خود را از دست می دهند، به نظرتون بهتر نیست از فونت های معمولی مثل tahoma در اندازه کوچک استفاده بشه (مثل بخش “به جستجوی تو باشم”).
    ۶٫ از لحاظ SEO:
    ۶-۱٫ سایز فشرده نشده فایل HTML صفحه اصلیتون (بدون در نظر گرفتن تصاویر، جاوا و سی اس اس) از مقدار میانگین ۳۳ کیلوبایت بیشتره که باعث میشه سرعت لود پایین بیاد.
    ۶-۲٫ گویا صفحات سایت cache نمیشن، استفاده نکردید.
    ۶-۳٫ کلیدواژهای استفاده شده در تگ مربوط به keywords در متا تگ title و description وجود ندارن. این باعث میشه که موتورهای جستجو به این کلمات کلیدی اهمیت کمتری بدهند.
    ۶-۴٫ از هیچ تگ H1 و H2 استفاده نکردید!!! و به جای این دو تگ همه (به خصوص H2) از div استفاده کردید. در این صورت موتورهای جستجو در پیدا کردن عناوین مطالب مشکل خواهند داشت.
    ۷٫ مطالب مرتبط با مطلب در حال نمایش وجود نداره.
    در کل اینها نکاتی بود که به نظرم رسید.
    موفق باشید، طاعات و عباداتتون قبول

    پاسخ
    • مهدی خدادادی گفته است: تیر ۳۱, ۱۳۹۲ در ۲:۴۰ ب.ظ

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

      پاسخ
  • رسول گفته است: مرداد ۱۰, ۱۳۹۲ در ۱:۲۱ ب.ظ

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

    پاسخ
  • میثاق گفته است: مرداد ۱۴, ۱۳۹۲ در ۳:۰۸ ب.ظ

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

    پاسخ
  • بنویسید و افتخار دهید تا بخوانیم :

    pixeler pixeler