بخش سوم: طراحی صفحه اصلی سایت اتریوم

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

یه نکته قبل از شروع طراحی

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

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

طراحی صفحه اصلی سایت اتریوم

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

می‌ریم توی پنل مدیریت وردپرس، از قسمت «برگه‌ها» وارد برگه‌ی «خانه» یا همون صفحه اصلی سایت می‌شیم و گزینه‌ی «ویرایش با المنتور» رو می‌زنیم تا صفحه باز بشه.

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

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

استفاده از نسخه فارسی سایت اتریوم

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

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

با این حال، چون ما داریم طراحی رو با سلیقه‌ی خودمون و با المنتور جلو می‌بریم، مطمئناً نسخه‌ای که در نهایت می‌سازیم خیلی خوش‌استایل‌تر، مرتب‌تر و حرفه‌ای‌تر از خود نسخه اصلی میشه! واقعاً طراحیا به حدی شیک دراومده که شاید اتریوم خودش بیاد از ما کپی کنه!😎

اضافه کردن کانتینرها

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

اولین کاری که انجام می‌دیم اینه که یه کانتینر (Container) جدید می‌سازیم. حالا چون المنتور جدید با ساختار فلکس‌باکس کار می‌کنه، باید از این ویژگی استفاده کنیم تا بتونیم ستون‌هامونو کنار هم بیاریم. توی این کانتینر اصلی، دو تا کانتینر داخلی اضافه می‌کنیم؛ یکی برای ستون سمت راست و یکی برای ستون سمت چپ. پس در مجموع داخل این ردیف، دو تا کانتینر فرزند داریم.

الان نوبت می‌رسه به تعیین عرض این دو تا ستون. همون‌طور که توی طرح سایت اتریوم می‌بینیم، یکی از ستون‌ها باید بزرگ‌تر باشه، مثلاً چیزی حدود ۷۰٪ عرض صفحه رو بگیره، و اون یکی هم کوچیک‌تر، حدود ۳۰٪. برای همین، کانتینر اول رو انتخاب می‌کنیم و عرضش رو می‌ذاریم روی ۷۰٪، و کانتینر دوم رو هم می‌ذاریم روی ۳۰٪. به همین راحتی، ساختار دو ستونه‌مون آماده‌ست.

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

ستون اول

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

طراحی تیتر اول

اول میایم یه تیتر اضافه می‌کنیم. متنش رو می‌ذاریم “موارد استفاده”. حالا برای اینکه این تیتر شبیه چیزی که توی سایت اصلی اتریوم هست بشه، یه سری تنظیمات روش انجام می‌دیم.

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

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

مثلاً اگه با ابزار اینسپکت توی سایت اتریوم سایز تیتر ۱۴ پیکسل باشه، ما هم همین حدود رو انتخاب می‌کنیم. نهایتاً بسته به اینکه توی صفحه چطور دیده می‌شه، شاید یه‌ذره کوچیک یا بزرگش کنیم.

بعدش ترازبندی متن رو راست‌چین می‌ذاریم چون زبان فارسیه، و یه مقدار فاصله داخلی براش تعریف می‌کنیم تا متن بهم نچسبه و مرتب دیده بشه. مثلاً یه فاصله ۵ پیکسلی از بالا یا پایین باعث می‌شه متن تمیزتر و خواناتر باشه. اگه خواستیم بک‌گراند براش بذاریم، مثلاً همون خاکستری خیلی روشن رو استفاده می‌کنیم که توی نسخه انگلیسی سایت دیده می‌شه.

طراحی تیتر دوم

حالا که تیتر اول آماده شد، میریم سراغ تیتر دوم. این تیتر همونیه که نوشته شده “روشی جدید برای استفاده از اینترنت”. این تیتر اهمیت بیشتری داره، پس باید بزرگ‌تر و برجسته‌تر دیده بشه. دوباره یه تیتر جدید به پایین تیتر قبلی اضافه می‌کنیم و متنش رو وارد می‌کنیم.

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

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

در کل این دوتا تیتر پایه‌ی اصلی این بخش هستن و قراره کاربر رو جذب کنن که ادامه‌ی محتوا رو هم بخونه. پس هم توی ظاهرشون باید جذاب باشن، هم از نظر ساختار درست و اصولی طراحی بشن. وقتی این دوتا تیتر آماده شدن، می‌تونیم بریم سراغ ادامه محتوا، مثلاً متن‌های توضیحی یا تصاویر مربوط به کاربردهای اتریوم.

ستون دوم

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

طراحی ستون دوم

کاری که باید انجام بدیم اینه که یه پس‌زمینه‌ی گرادینتی براش تعریف کنیم. توی سایت اتریوم، برای این کار از یه linear gradient استفاده شده که از سمت راست به چپ کشیده شده. ما هم همین مسیر رو می‌ریم.

میایم توی تنظیمات استایل المنتور، بخش پس‌زمینه رو باز می‌کنیم و نوع پس‌زمینه رو روی «گرادینت» می‌ذاریم. حالا برای رنگ اول، از رنگ سازمانی که قبل‌تر توی پروژه استفاده کردیم بهره می‌گیریم. مثلاً همون بنفش خاص که توی تایتل‌ها یا دکمه‌ها هم بوده. ولی اینجا یه تفاوت کوچیک داره، اونم اینه که با شفافیت پایین‌تر (opacity کم) استفاده شده، مثلاً حدود ۱۰٪ یا ۲۰٪.

رنگ دوم گرادینت هم باز یه رنگ نزدیک به همین بنفشه، با یه کد رنگ خاص که از سایت اتریوم برداشتیم، اونم با شفافیت کمتر. هدف اینه که یه بک‌گراند محو و حرفه‌ای داشته باشیم که اذیت نکنه اما ظاهر خاص خودش رو هم داشته باشه.

زاویه گرادینت رو هم تنظیم می‌کنیم. چون باید از راست به چپ باشه، عدد زاویه رو می‌ذاریم روی ۹۰ درجه تا دقیقاً همون حالتی رو بهمون بده که توی نمونه هست.

تا اینجا که گرادینت درست شد، حالا نوبت مرز یا همون بوردرشه. توی سایت اصلی، یه حاشیه خیلی ظریف دور این باکس وجود داره. میایم قسمت حاشیه (border) و تنظیماتش رو باز می‌کنیم. نوع حاشیه رو «یکپارچه» یا solid می‌ذاریم، ضخامت رو روی ۱ پیکسل، و رنگش رو هم همون رنگی که توی طراحی خودش استفاده شده قرار می‌دیم. این رنگ دقیقاً با ترکیب کلی سایت هماهنگه، پس جلوه‌ی خوبی می‌ده.

نکته‌ی مهم دیگه اینکه گوشه‌های این باکس یه‌کم گرد شدن. یعنی حاشیه‌هاش انحنا دارن. برای این کار باید مقدار border-radius رو مشخص کنیم. معمولاً با استفاده از ابزار Inspect توی مرورگر می‌شه اینو چک کرد. توی سایت اتریوم مقدارش ۱۶ پیکسل بود، پس ما هم دقیقاً همین رو وارد می‌کنیم تا اون حالت گردی گوشه‌ها به خوبی اعمال بشه.

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

محتوای ستون دوم

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

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

ستون اول

حالا داخل ستون اول میایم و تصویرمون رو اضافه می‌کنیم. تصویر مورد نظر از سایت اصلی اتریوم دانلود شده، پس می‌تونیم راحت اونو ذخیره کنیم و از قسمت «افزودن تصویر» توی المنتور، بارگذاریش کنیم. بعد هم یه‌راست بندازیمش داخل ستون اول. وقتی عکسو وارد کردیم، تقریباً نصف مسیر این بخش رو رفتیم.

ستون دوم

حالا می‌رسیم به ستون دوم. اینجا دوتا متن باید بذاریم، یکی تیتر اصلی و یکی توضیح کوتاه‌تر زیرش.

طراحی تیتر

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

طراحی متن

زیر تیتر اول هم یه متن توضیحی داریم که نقش یه پاراگراف یا پی رو داره. برای اینم می‌تونیم اون متن بالایی رو تکثیر کنیم و بیاریم پایینش. حالا فقط کافیه فونتش رو یکم کوچیک‌تر کنیم. توی بخش استایل، میریم توی تایپوگرافی و فونت رو مثلاً می‌ذاریم روی ۱۷ یا ۱۸ پیکسل که نرمال باشه و با فضای کلی ستون هماهنگ باشه.

ارتفاع خط یا line-height رو هم بهتره یکم تنظیم کنیم. پیشنهاد اینه که به‌جای استفاده از پیکسل، از واحد em استفاده کنیم چون توی واکنش‌گرایی (ریسپانسیو بودن) هم عملکرد بهتری داره. مثلاً ارتفاع خطو بذاریم روی ۱.۱em که یه حالت جمع‌وجور و مرتب به متن می‌ده.

در نهایت، اگر دیدیم که فونت تیتر اصلیمون باید بزرگ‌تر باشه که بهتر به چشم بیاد، اونو هم می‌تونیم ببریم بالا مثلاً بذاریم روی ۲۰ پیکسل یا حتی بیشتر، تا توجه رو به خودش جلب کنه و با تصویر سمت چپ بالانس بشه.

طراحی دکمه

برای طراحی دکمه «بیشتر بدانید» اول داخل ستونی که از قبل ساختیم، یه دکمه اضافه می‌کنم و متنش رو می‌ذارم «بیشتر بدانید». بعد برای اینکه ظاهری زیباتر داشته باشه، یه آیکون کنارش می‌ذارم؛ مثلاً یه فلش به سمت چپ (left arrow) که با سبک کلی دکمه هماهنگه. فاصله بین متن و آیکون رو هم تنظیم می‌کنم تا دکمه تمیزتر دیده بشه.

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

رنگ متن دکمه رو می‌ذارم روی رنگ اولیه (Primary) و رنگ پس‌زمینه رو کاملاً شفاف (transparent) می‌کنم. برای حالت عادی دکمه، سایه نمی‌ذارم چون طراحی تمیز و ساده‌ست.

حالا نوبت به انحنای گوشه‌های دکمه می‌رسه. می‌رم بخش کامپیوتد مرورگر، مقدار دقیق border-radius رو درمیارم که ۴ پیکسل هست. منم این عدد رو دقیق روی ۴ پیکسل می‌ذارم تا با طراحی اصلی هماهنگ باشه.

فاصله داخلی دکمه رو از بالا و پایین حدود ۱۵ پیکسل می‌ذارم و برای چپ و راست، یه مقدار بیشتر در نظر می‌گیرم؛ مثلاً ۲۰ یا ۲۵ پیکسل. این باعث می‌شه دکمه کشیده‌تر و جذاب‌تر بشه. بعد یه حاشیه‌ی ساده (solid) براش تعریف می‌کنم با ضخامت یک پیکسل و رنگ مشکی.

حالا می‌رم سراغ حالت هاور (hover). وقتی کاربر می‌ره روی دکمه، این تغییرات اعمال می‌شن:

• رنگ متن به رنگ سازمانی تغییر می‌کنه.
• رنگ پس‌زمینه همون شفاف باقی می‌مونه.
• حاشیه مشکی تبدیل به حاشیه با رنگ سازمانی می‌شه.

برای اینکه مطمئن بشم رنگ سازمانی دقیق همونه که باید باشه، تو مرورگر حالت hover رو فعال می‌کنم و کد رنگ دقیق رو درمیارم. اون رنگ رو با یه اسم مثل «بنفش سرد» توی رنگ‌های سفارشی قالب ذخیره می‌کنم تا بعداً راحت ازش استفاده کنم.

یه سایه‌ هم برای حالت هاور اضافه می‌کنم. مشخصاتش به این شکله:

• offset افقی: ۰ پیکسل
• offset عمودی: ۴ پیکسل
• محوشدگی: ۴ پیکسل
• رنگ: مشکی با اپسیتی پایین

این سایه کمک می‌کنه دکمه تو حالت هاور برجسته‌تر و قابل کلیک‌تر دیده بشه، بدون اینکه ظاهر کلی رو سنگین کنه.

در نهایت فونت دکمه رو بزرگ‌تر می‌کنم؛ مثلاً می‌ذارم روی ۱۷ پیکسل تا خواناتر باشه و طراحی حرفه‌ای‌تری داشته باشه. الان که تنظیمات کلی رو ذخیره می‌کنم، هر دکمه‌ای که تو سایت می‌سازم دقیقاً همین استایل رو می‌گیره. فقط کافیه متنشو تغییر بدم و تو هر بخشی بذارمش، بدون نیاز به طراحی مجدد.

برای مرتب بودن چیدمان هم، کل ستون رو وسط‌چین می‌کنم و فاصله بین دو ستون رو بیشتر می‌ذارم؛ مثلاً ۴۰ پیکسل، تا المان‌ها بهتر نفس بکشن و طراحی مرتب دیده بشه.

طراحی بخش شبکه‌ای سایت اتریوم

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

پس من اول یه کانتینر می‌سازم که توش دوتا ستون قرار بگیره. سمت چپی همون باکس تکیه و سمت راستی سه‌تا آیتم داره. ستون چپ رو که اضافه می‌کنم، عرضشو یه کم کمتر می‌گیرم، مثلاً ۴۵٪، تا جاش اندازه همون چیزی بشه که توی طرح هست. یه ستون می‌ندازم داخلش و عرضشو روی ۱۰۰٪ تنظیم می‌کنم که فیکس بشینه تو ستون خودش. این بخش سمت چپ الان کامل و درسته.

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

توی ردیف دوم، فقط یه آیتم قراره باشه، پس یه دونه ستون داخل اون قرار می‌دم و عرضشو می‌ذارم رو ۱۰۰٪ که تمام فضای عرضی ردیف پایین رو بگیره.

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

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

از بین بردن فاصله‌های اضافی

الان که ساختار کلی شبکه‌مون رو ساختیم، ممکنه یه سری فاصله‌های خالی یا ناهماهنگ بین ستون‌ها ببینیم که ظاهر کار رو بهم می‌ریزن. کاری که انجام می‌دم اینه که این فاصله‌های اضافه رو صفر می‌کنم. برای این کار، می‌رم سراغ تنظیمات پیشرفته ستون‌ها (همون Advanced). هر ستونی که تو این بخش هست رو انتخاب می‌کنم، بعد تو قسمت فاصله داخلی یا همون پدینگ (Padding)، همه مقادیر رو صفر می‌ذارم. یعنی همه‌ی ستون‌هایی که تو این شبکه هستن، یکی‌یکی پدینگ‌شون رو صفر می‌کنم.

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

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

راه اصولی‌تر چیه؟ اینکه بیایم ستون والدش رو انتخاب کنیم، یعنی اون ستونی که این یکی توش قرار گرفته. چون پدینگ رو صفر کردیم، شاید نشه مستقیم انتخابش کرد، پس یه‌جور غیرمستقیم یا با راست‌کلیک انتخابش می‌کنم. بعد از اینکه انتخابش کردم، تو بخش «طرح‌بندی» یا همون Layout، تراز موارد (Align Items) رو می‌ذارم روی «کشیده» یا Stretch. اگه بازم درست کار نکنه، جهت محتوا (Direction) رو می‌ذارم روی افقی (Horizontal) تا محتوا به درستی کش بیاد و ارتفاع رو پر کنه.

طراحی باکس‌های شبکه

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

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

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

حالا خود ستون این باکس هم باید جهت محتوایی که داخلشه عمودی باشه، چون می‌خوایم آیتم‌ها از بالا به پایین بچینن نه کنار هم. پس می‌ریم تو تنظیمات و جهت ستون رو روی عمودی (Column) می‌ذاریم.

طراحی باکس اول

برای تصویر آیکونی که داخل باکسه، معمولاً یه SVG یا PNG از طراحی اصلی داریم. اون رو دانلود می‌کنیم و می‌ذاریم داخل باکس، پایین‌تر از متن یا بالاتر، بسته به طراحی اصلی. مثلاً ممکنه توی طراحی اصلی تصویر زیر متن قرار داشته باشه، پس ترتیبش رو رعایت می‌کنیم.

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

طراحی باکس دوم

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

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

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

برای متن باکس (مثلاً اینجا نوشته‌ی «اپلیکیشن‌های نوآورانه») کافیه که جای متن قبلی رو بگیریم و متن جدید رو بنویسیم. عبارت «بیشتر بدانید» هم به عنوان دکمه یا لینک اطلاعات تکمیلی در پایین باکس قرار می‌گیره.

در نهایت، برای اینکه همه چیز مرتب باشه و محتوای داخل باکس از لحاظ عمودی تراز باشه، می‌تونیم بیایم و گزینه‌ی «تراز موارد» (Align Items) رو روی وسط (Center) بذاریم. با این کار همه چیز از بالا تا پایین مرتب و هماهنگ وسط‌چین میشه و ظاهر تمیزتری به خودش می‌گیره.

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

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

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

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

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

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

فاصله گذاری بین بخش‌های مختلف

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

کاری که باید بکنیم اینه که بیایم روی اون آیکونی که با متن یا عنوانش فاصله‌ی زیادی یا کمی داره کلیک کنیم، بعد از طریق تب «پیشرفته» در تنظیمات المنتور (یا هر صفحه‌سازی که استفاده می‌کنیم)، توی قسمت «حاشیه خارجی» (margin)، مثلاً از بالا یه فاصله ۵۰ تا ۸۰ پیکسل می‌دیم. این عدد دقیقش بسته به اینه که چه‌قدر فضا نیاز داریم تا محتوا نفس بکشه، ولی معمولاً بین ۴۰ تا ۸۰ خوب جواب می‌ده. وقتی این حاشیه رو اضافه کنیم، می‌بینیم که فضای بین آیکون و متن خیلی بهتر و متعادل‌تر دیده می‌شه.

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

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

جمع بندی

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

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

جلسه بعدی، با انرژی و آمادگی کامل، میریم سراغ ادامه طراحی سایت اتریوم. شاد و سربلند باشید.🙂

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...