ارائه؛ سیدارمپ «۱»

× سیامک مختاری.
ارائه؛ سیدارمپ «۱»

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

روند طراحی

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

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

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

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

رنگ‌بندی و سبک طراحی

توی طراحی این پروژه تا جای ممکن سعی شده معیارهای ساده‌گرایی (مینیمالیسم) رعایت بشه. نوع آیکون‌ها روزهای اول قرار بود به شکل خطی و تک رنگ و با استفاده خط‌های ساده باشه ولی وسط کار به این نتیجه رسیدیم آیکون‌ها فلت با رنگ‌های متنوع و سایه‌های رنگی باشه که تقریبا همه آیکون‌ها دور ریخته شد و سری جدید با سبک جدیدی روی کار نشستند. محوریت پروژه لوکیشن و نقشه هستش و بخاطر همین توی طراحی آرت‌وورک ها و آیکون‌ها سعی کردم اجزای سکشن‌ها واقعی و حال و هوای نقشه داشته باشند.
رنگ اصلی پروژه «فیروزه‌ای Java» از قبل انتخاب شده بود. من رنگ دوم «آبی تیره Regal» و رنگ اکسنت «خردلی Golden Tainoi» رو ساختم. دلیل انتخاب این دو رنگ بخاطر هارمونی‌شون با رنگ فیروزه‌ای بود.

تایپوگرافی و هارمونی

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

Grid view (width: 1 * 2rem — height: 1 * 1rem)

اجزای صفحه به صورت دقیق و مستقل خانه‌ها را کامل می‌کنند و با فواصل مشخص و اندازه ثابت ساخته می‌شوند. سختی کار اینجاست که باید رابطه‌ای بین خانه‌های طولی و عرضی صفحه برقرار شود. یعنی مثلا وقتی عرض نوشته‌ای ۱۲واحد را می‌گیرد، ارتفاع آن‌هم باید فضایی را بگیرد که از خانه‌ای بیرون نزند (خانه‌ای نباید نصفه باشد. تمام خانه‌هایی که استفاده می‌شوند باید کامل پر شوند) این‌ها در صورتی‌ست که سایز نوشته، ارتفاع خط، فاصله حروف و… نسبی کنار هم هستند و اندازه ثابتی وجود ندارد. اینجا بود که تصمیم گرفتم نوع گرید را Adaptive در نظر بگیرم. چون باید اندازه ستون‌ها ثابت باشند تا خانه‌هایی عرضی درست قطع شوند.
اندازه فونت تو این پروژه بین ۱۰ تا ۱۲ پیکسل به صورت ریسپانسیو در بازه سایزی (مانیتور) ۲۴۰ تا ۷۶۸ پیکسل در حال تغییر هستش. اما چرا؟ ساختار فونت ایران‌سنس، فونتی با سایز بزرگ هستش. در مقایسه با فونت‌های دیگر می‌توان به بزرگیش پی برد:

IranSans, Vazir, Omid FontSize.

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

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

در پروژه‌های بزرگ و با جزییات زیاد پیشنهاد نمی‌کنم این‌کار انجام بشه. بخاطر ریزه‌کاری هایی که لازم داره، زمان‌بر و پیچیدگی داره. اگر همه چیز بخواد توی یک چارچوب قرار بگیره باید طبق یک رابطه اندازه داشته باشه و بخاطر همین تو پروژه‌های بزرگ ممکن بجای نظم بی‌نظمی بیشتری درست بشه!
برای سایزبندی نوشته‌ها ازModularScaleبا نسبت1.50استفاده کردم. یعنی اگر اندازه پیش‌فرض ۱۲پیکسل باشد، اندازه بعدی12 * (1.5)1و اندازه بعدی12 * (1.5)2و در آخر یک دنباله اعداد ساخته می‌شود که قدر نسبتشون1.5خواهد بود.

تو نسخه اولیه تمامی سکشن‌ها گرادینت‌های ساده و رنگی بودن. در آخر هر سکشن بک‌گراندی مربوط به خودش تو محیط واقعی داشته باشه که این اتفاق باعث شد کار واقعی‌تر بنظر بیاد و بشه باهاش ارتباط برقرار کرد.


توی پروسه طراحی از نرم‌افزارSketch (برای مک) و ازInvision (به همراهCraft) برای ورژن‌کنترل طرح‌ها و مشارکت با تیم سیدار استفاده کردم. ازunsplash.com برای عکس‌های پس‌زمینه و برای انتخاب رنگ‌های خام ازcoolors.co استفاده کردم.


در پست بعدی که بزودی منتشرش می‌کنم درباره تکنولوژی و تجربیات فنی و ابزار می‌نویسم. امیدوارم این پست رو دوست داشته باشید و بدردتون خورده باشه :)

شاد باشید،
سیامک مختاری – بهار، اردیبهشت ۱۳۹۶.