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

ساختار و رنگبندی طرح

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

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

تایپوگرافی

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

برای تنظیم سایز قلم در متون مختلف و همچنین تنظیم ارتفاع خطوط از یک Modular Scale با مبنای نسبت طلایی (فی) استفاده کردم (البته به صورت رند شده) (بیشتر+). به این صورت که تمام متن‌های موجود در طرح مضربی از همدیگه بر اساس یکی از اعداد داخل Scale هستن. این موضوع خوانایی رو بالاتر می‌بره و طرح رو چشم‌نواز می‌کنه و باعث می‌شه که چشم خواننده موقع اسکن صفحه و خوندن مطالب خیلی خسته نشه. برای تنظیم فاصله‌های خالی طرح هم از همین اعداد استفاده شده که نسبتشون با متون رعایت شده باشه.

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

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

طراحی ریسپانسیو

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

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

ویدیو از عملکرد نسخه موبایل

طراحی بدون تصویر و پیکسل پرفکت

غیر از لوگوی یک‌پزشک و لوگوهای اپلیکیشن‌ها (کارنتس، فلیپ‌بورد و نیوزاستند) که به صورت وکتور در دسترس نبودن، در طراحی یک‌پزشک از هیچ عکسی استفاده نکردم و کل طراحی با CSS انجام گرفته. این کار تعداد درخواست‌های شبکه رو کاهش می‌ده و باعث می‌شه که سایت با سرعت بیشتری بارگذاری بشه. آیکن‌های موجود در طرح با استفاده از وب‌فونت بارگذاری می‌شن و با ابزار IcoMoon ساخته و شخصی‌سازی شدن. فایل مربوط به آیکن‌ها فقط شامل آیکن‌هایی هست که در طرح استفاده شدن و چیزهای اضافی درش قرار نگرفته که فایل رو سنگین نکنه. تموم آیکن‌های روی گرید ۱۶ پیکسلی طراحی شدن و توی طرح برای نمایششون از مضرب ۱۶ پیکسل استفاده شده (۱۶، ۳۲، ۶۴، ...) تا شفافیت و وضوحشون رو از دست ندن. اون چند تا عکسی هم که در طرح وجود داره، به صورت اسپرایت درآوردم و برای فشردگی‌های پیکسلی مختلف آماده کردم که وضوحشون رو روی صفحه‌نمایش‌های باکیفیت‌تر از دست ندن.

فشرده‌سازی و حجم پایین فایل‌ها

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

تکنولوژی‌های مورد استفاده

برای طراحی یک‌پزشک از HTML5 و CSS3 بدون پشتیبانی مرورگرهای قدیمی استفاده کردم. طرح فقط در اینترنت‌اکسپلورر ۱۰ و بالاتر و مرورگرهای مدرن کار می‌کنه و هیچ کاری برای پشتیبانی مرورگرهای قدیمی انجام ندادم.

برای CSS از Sass با Libsass استفاده کردم که سرعت بالاتری داره. از Libsass با استفاده از ابزار Grunt خروجی می‌گیرم و با استفاده grunt-autoprefixer پیشوندهای وندور رو به سی‌اس‌اس تولید شده اضافه می‌کنم و در نهایت فشرده‌سازی می‌کنم و بالای فایل مشخصاتش رو می‌نویسم. فایل‌های جاواسکریپت رو هم با استفاده از Grunt و پلاگین uglify به هم می‌چسبونم و فشرده‌سازی می‌کنم و بالای فایلشون مشخصاتشون رو می‌نویسم که همشون باهم ۱ فایل بشن فقط. همچنین برای Autoreload کردن، اسپرایت کردن تصاویر به صورت خودکار و ورژنینگ هم از Grunt استفاده می‌کنم.

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

از ادیتور Sublime Text نسخه ۳ هم برای کدنویسی و انجام تمام کارهای مربوط به Git استفاده کردم.

صفحه‌های که من طراحی کردم

مواردی که من برای طرح یک‌پزشک طراحی کردم این‌ها بودن: صفحه اصلی به همراه باکس‌های ویژه سایدبار، صفحه مطلب، صفحه پروفایل کاربر، بخش نظرات و صفحه تماس.

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

مشکلات فعلی طرح

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

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

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