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

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

چرا تغییر ؟

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

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

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

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

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

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

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

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

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

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

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

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

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