طراحی سایت با اسکچ به چه شکل است
یکی از مهم ترین عواملی که میتواند سایت شما را زیباتر کند داشتن یک طراح وب سایت خوب است اما جا از آن بهتر است با نرم افزارهایی دیکری نیز آشنا باشید تا بتوانید طراحی وب سایت خود را خودتان به عهد بگیرید برای همین منظور در این مطلب سعی کرده ایم که مواردی را در مورد طراحی وب سایت با اسکچ به شما آموزش دهیم.
طراحی سایت با اسکچ: زمانی که بحث طراحی به میان میآید، اکثر ذهنها به سمت نرمافزارهایی مثل فوتوشاپ و ایلاستریتور میروند. اما آیا اینها مطلقا بهترین گزینههای موجود در بازارند؟ به این سوال نمیتوان جواب قطعی داد. چرا که این نرمافزارها جایگاه ثابت خود را در میان طراحان حرفهای پیدا کردهاند و خروجیهایشان از کیفیت بالای آنها خبر میدهد. اما در سالهای اخیر نرمافزارها و ابزارهای جدیدی با امکانات ویژه برای طراحی سایت و اپلیکیشن ظهور کردهاند که قابلیت رقابت با فوتوشاپ را دارند.
یکی از این نرمافزارها اسکچ است. امتیاز اسکچ نسبت به فوتوشاپ این است که اسکچ مخصوص طراحی UI/UX ساخته شده است و ابزارهایی متناسب با آن دارد. در این مقاله قصد داریم به بررسی اینکه طراحی سایت با اسکچ به چه شکل است بپردازیم. لازم به ذکر است این نرمافزار، در حال حاضر تنها برای سیستم عامل مک عرضه میشود.
اسکچ چیست و از کجا میآید؟
اسکچ آپ یک ویرایشگر گرافیکی Vector است که تنها برای سیستمعامل macOS به بازار عرضه میشود. اساسیترین و مهمترین کاربرد اسکچ، به طراحی رابط و تجربه کاربری سایتها و اپلیکیشنها مربوط میشود. این نرمافزار برای طراحیهای چاپی و طراحیهای کلاسیک مناسب نیست.
اسکچ برای اولین بار در سپتامبر سال ۲۰۱۰ توسط شرکت Bohemian Coding (که در حال حاضر Sketch BV نامیده میشود) به بازار عرضه شد. نسخههای اولیه اسکچ پر از باگ، کمبود امکانات و اشکالات ریز و درشت بود که باعث شهرت منفی آن در بین طراحان شد. اما این اشکالات به مرور زمان رفع شدند و اسکچ توانست رفتهرفته جایگاه خود را در بازار و و در میان رقبای خود تثبیت کند. رقبای کنونی اسکچ عبارتند از:
- Figma
- Adobe XD
- InVision Studio
- Mockplus
- Framer
- Lunacy
- Gravit
طراحی سایت با اسکچ
اگر صاحب یک مک بوک هستید و زمینه کاری شما به طراحی وب سایت مربوط میشود، اسکچ گزینه مناسبی برای یادگیری خواهد بود. اما واقعا طراحی سایت با اسکچ چگونه است برای جواب به این سوال منابع پرشماری در سراسر اینترنت وجود دارد. ویدیوهای آموزشی به شما کمک میکنند کار با این نرمافزار را به شکل عملی آموخته و یادگیری خود را با انجام مثالها تثبیت کنید. محتوای متنی بدون شک تاثیرگذاری محتوای ویدیویی را نخواهد داشت؛ اما سعی میکنیم با معرفی بخشهای مختلف نرمافزار و مبانی طراحی رابط کاربری سایت، شما را در این مسیر قرار دهیم.
باز کردن یک پروژه و تعیین سایز
از گوشه چپ بالای صفحه روی NEW کلیک کنید تا پروژه جدید ایجاد شود. شما میتوانید نام پروژه را در نوار سمت چپ تصویر ببینید. در سمت راست یک نوار دیگر قرار دارد که پر از زبانهها و ابزارهای مختلف است. در بالاترین قسمت این نوار، عبارت Size به چشم میخورد. شما میتوانید با تغییر دادن اعداد این بخش، سایز صفحه خود را تغییر دهید. هر چه جلوتر میرویم، بیشتر خواهید دید که طراحی سایت با اسکچ چقدر ساده و لذتبخش خواهد بود. در واقع تفاوتی نمیکند طراح ui باشید یا طراح ux، تا چند سال دیگر، یادگیری اسکچ به یک الزام تبدیل خواهد شد.
قراردهی یک پس زمینه
برای این کار تنها کافی است فایل حاوی عکس مورد نظر را باز کرده و عکس را روی صفحه سفید پروژه Drag & Drop کنید. پس از این کار با استفاده از همان منوی Size در سمت راست صفحه میتوانید این عکس را با سایز صفحه وب خود تنظیم کنید. در پایین منوی تنظیم اندازه، تعدادی زبانه برای کار روی ویژگیهای عکس از جمله میزان وضوح، روشنایی، رنگ و... وجود دارد که با کلیک روی آنها میتوانید عکس را در جهت نیازهای صفحه وب خود تغییر دهید.
قفل کردن یک لایه
با کلیک راست بر روی نام پروژه و انتخاب گزینه Lock Layer میتوانید لایه مورد نظر را پس از انجام تغییرات قفل کنید تا بر حسب اتفاق تغییر نکند. توصیه میشود پس از اعمال هر تغییر مهم روی پروژه، لایه تغییر یافته را قفل کنید.
اضافه کردن متن به طراحی
کافی است روی کیبورد خود T را فشار دهید تا متن پیشفرض روی صفحه طراحی سایت شما ظاهر شود. میتوانید این متن پیشفرض را با متن دلخواه خود جایگزین کرده و سپس از نوار سمت راست، ویژگیهای گرافیکی آن را تعیین کنید. در نوار سمت راست امکانات مختلفی برای تنظیم ضحامت، رن، اندازه و نوع متن وجود دارد.
اضافه کردن دکمه به طراحی
یکی از مهمترین بخشهای طراحی وب سایت، اضافه کردن دکمههایی مثل «ثبت نام کنید» است. برای اضافه کردن یک دکمه به طراحی سایت با اسکچ، تنها کافی است دکمه U را روی کیبورد خود فشار دهید تا ابزار رسم مستطیل بدون گوشه آمادهبهکار شود.
سپس دکمه را با اندازه مورد نظر در موقعیت مکانی مورد نظر خود قرار دهید. باز هم از منوی سمت راست میتوانید اندازه، رنگ، ضحامت و دیگر ویژگیهای ظاهری دکمه خود را تعیین کنید. برای نوشتن متن درون آن هم کافی است دوباره T را بفشارید تا ابزار نوشتاری ظاهر شود.