بخش ششم طراحی سایت اپل با المنتور

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

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

ادامه طراحی سایت اپل با المنتور

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

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

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

دقیقا از متن مشابهی که قبلا ساختید، یه کپی بگیرید.

بخش آخر صفحه کلیک راست کنید و پیست رو بزنید.

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

کاور ویدیو رو هم دانلود کنید که به صورت تمام عرض نیست. در نهایت بعد از تغییراتی که انجام می‌دید باید چیزی شبیه به تصویر زیر رو داشته باشید.

بعد از اون بخش دوتا متن وجود داره.

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

بعد از اون یه بخش اسلایدی هست.

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

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

بعد از اون یه دکمه هست که میتونید با افزودن یه المان دکمه، شبیه اونو طراحی کنید.

یه المان دکمه اضافه کنید و از تب استایل، جایگاهشو روی وسط بذارید.

رنگ پس زمینه‌ی دکمه رو از سایت اپل بردارید.

توی تب استایل به عنوان رنگ پس‌زمینه‌ی دکمه بدید. یه آیکن برای دکمتون انتخاب کنید.

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

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

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

یا اینکه می‌تونید توی همون کدها از سمت بالا 5px هم مارجین بدید.

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

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

در نهایت اونو وارد صفحه کنید.

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

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

و کد زیر رو برای اون توی بخش سی‌اس‌اس سفارشی وارد کنید.

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

متن رو تغییر بدید، رنگشو عوض کنید و تنظیمات دیگه‌ای که باعث میشه متنتون به سایت اپل شبیه‌تر بشه.

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

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

فاصله داخلی متن‌ها رو بردارید و یه سربرگ به بالای هر ستون اضافه کنید و از پایین بهش حاشیه 1px بدید به رنگ خاکستری.

به هر ستون فاصله داخلی بدید که ظاهرش شبیه‌تر بشه به سایت اپل و متن‌ها رو هم ویرایش کنید. شکاف بین المان‌های ستون‌ها رو هم صفر کنید و تمام.

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

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

رضا راد

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