گاهی وقتا ممکن است یک طراح کلی زمان بگذارد و طرح را با تمام جزئیات پیاده سازی کند. اما در آخر مورد قبول کارفرما قرار نگیرد. چه اتفاقی می‌افتد؟ بدون شک کلی زمان از دست می‌رود. اما می‌توان همین روند را ابتدا با طراحی وایرفریم آغاز کرد تا تاییدیه اولیه طرح را بگیریم. سپس با خیال راحت می‌توانیم به جزئیات بیشتر مانند رنگ، استایل، تایپوگرافی، کامپوننت در فیگما و تصاویر بپردازیم.
در این پکیج آموزش ui ux رایگان از آژانس نوآوری رسام قصد داریم به طراحی وایرفریم در فیگما یا همان low fidelity بپردازیم. همچنین می‌خواهیم به سوال وایرفریم چیست؟ پاسخ بدهیم. با یادگیری این مباحث زمان بیشتری را در طراحی صرفه جویی میکنیم. پس از شما دعوت میکنیم تا پایان این جلسه از آموزش ui رایگان ما را همراهی کنید.
طراحی low fidelity و high fidelity
همانطور که در جلسات قبل بیان شد، طراحی رابط کاربری به دو بخش low fidelity design (طراحی اسکچ و وایرفریم) و high fidelity design (طراحی پروتوتایپ) تقسیم می‌شود. البته به شکل دیگری هم می‌توان تقسیم‌بندی کرد. اینجا منظور تقسیم‌بندی از نظر حجم جزئیات است. در اسکچ و طراحی وایرفریم جزئیات وجود ندارد. رنگ‌ها، کامپوننت‌های پیچیده، تصاویر، اینترکشن‌ها و حتی ممکن است تایپوگرافی و گریدسیستم نیز با آن دقت پروتوتایپ وجود نداشته باشد.
طراحی اسکچ – Sketch
اسکچ یک طرح دستی است که توسط طراحان اجرا می‌شود. این طرح صرفا شامل رابط کاربری نیست. معماران، نقاشان، طراحان چهره، طراحان لوگو، حتی طراحان فرش از این روش استفاده می‌کنند تا آنچه در ذهن خود دارند را پیاده‌سازی کنند. در طراحی رابط کاربری، اسکچ مشابه سایر تخصص‌های نام برده، به صورت ساده با کاغذ و قلم اجرا می‌شود. گاهی طراحی اسکچ در ui، حاشیه‌نویسی می‌شود تا جزئیات آن بعدا بهتر یادآوری شوند. حتی ممکن است به جای متون واقعی، از خط خطی کردن استفاده شود. مشابه تصویری که می‌بینید در برخی قسمت‌ها این کار انجام شده است.
اسکچ همان طرحی است که در ذهن شما قرار دارد. حالا می‌خواهید آن را روی کاغذ بیاورید. بدیهی است که این طرح، ساده است و جزئیات طراحی در آن وجود ندارد. حتی ممکن است خط و خطوط آن منظم نباشد. برخی حتی از خط‌کش هم برای ترسیم استفاده نمی‌کنند و این موضوع لزوما در طراحی اسکچ ایرادی ندارد چون قصد نداریم وقت زیادی روی آن بگذاریم.
طراحی وایرفریم – Wireframe
وایرفریم همان اسکچ است اما کمی خوش‌چهره تر! در واقع وایرفریم، اسکچ وارد شده به نرم‌افزار است که کمی جزئیات بیشتری نسبت به اسکچ دارد. وایرفریم‌ها نیز ممکن است برخی ساده‌تر طراحی شده و برخی نیز کمی جزئیات بیشتری داشته باشند. اما چیزی که در همه طراحی وایرفریم‌ها مشترک است، نبودن رنگ‌بندی، تصاویر، اینترکشن‌ها و کامپوننت‌های پیچیده و هرچیزی که اجرای آن پروژه را زمان‌بر کند.
اگر بخواهیم برای اجرای طراحی وایرفریم یک دلیل بیاوریم، باید بگوئیم که وایرفریم و یا به طور کل طراحی low fidelity باعث می‌شود در هزینه و زمان صرفه‌جویی کنیم. ما وقتی طراحی را به صورت وایرفریم در فیگما اجرا میکنیم، با هزینه و زمان بسیار کمتری، کل طراحی جلو می‌رود. سپس گفتگو با برنامه‌نویسان، سایر اعضای تیم طراحی محصول و به طور کل ذینفعان و کارفرما، به ما کمک می‌کند تا از خطاها و مشکلات احتمالی در آینده، تا جای ممکن جلوگیری کنیم. این نگاه پیش‌گیرانه، خصوصا در محصولات بزرگ‌مقیاس، کمک بسیاری در پیشبرد کار و صرفه‌جویی در منابع و نیروی انسانی را به همراه خواهد داشت. بسیاری از طراحان حرفه‌ای قبل از طراحی سایت (بدون اینکه کارفرما از آنها طرح اولیه یا وایرفریم خواسته باشد) ممکن است یک طرح اسکچ یا وایرفریم با جزئیات کمتر برای پیشبرد بهتر کار خود پیاده سازی کنند.
به تصویر بالا دقت کنید. هر دو وایرفریم هستند. وایرفریم سمت راست جزئیات بیشتری دارد. اما به هر حال یک وایرفریم است و با پروژه تکمیل شده ui فاصله زیادی دارد. وایرفریم سمت چپ نیز مشابه همان بوده، فقط کمی ساده‌تر طراحی شده است. برای نمایش تصاویر معمولا یا یک ضرب‌در درون باکس‌ها ایجاد میکنیم و یا با استفاده از یک آیکن که بیانگر تصویر است، به اشخاصی که وایرفریم را می‌بینند مفهوم باکس که بعدا قرار است تصویر در آن قرار بگیرد را منتقل می کنیم.
وایرفریم در چه مرحله ای از فرآیند UX طراحی می‌شود؟
بعد از انجام پرسونای مشتری و تحقیقات کاربری، بدیهی است که هنوز با اجرای ui فاصله داریم. موضوعات دیگری همچون دسترسی‌پذیری، کاربردپذیری و معماری اطلاعات نیز باید انجام شود. (البته برخی از این موارد بعد از ui نیز دنبال می‌شوند و چرخه ux همیشه برقرار است). وایرفریم بعد از معماری اطلاعات انجام می‌شود. یعنی زمانی که شما تست‌های Card Sorting و طراحی Useflow را انجام داده‌اید.
نکته قابل توجه این است که وایرفریم زمانی قابل اجرا است که شما Userflow داشته باشید. البته اگر پروژه شما یک یا صرفا چند صفحه باشد بدون وجود Userflow هم می‌توانید ui را شروع کنید. اما فرض کنید یک اپلیکیشن یا فروشگاه آنلاینی دارید که بالای 80 صفحه دارد. پروفایل و فرآیند سبد خرید را نیز دارد. همچنین با وجود فیلترهای فروشگاه و فرآیندی که دارد، قطعا شما نیاز خواهید داشت که Userflow داشته باشید و وایرفریم خود را با توجه به آن طراحی کنید.
پس از اجرای وایرفریم، در مراحل بعدی، ساخت استایل‌گاید و کامپوننت‌ها و در نهایت اجرای پروتوتایپ پروژه است. در دو تصویر بالا، وایرفریم و پرتوتایپ را مشاهده می‌کنید. در جلسه بعد در مورد پروتوتایپ، بیشتر صحبت خواهیم کرد. توجه داشته باشید که به دلیل تمرینی و عملی بودن این کار، حتما ویدئوهای این جلسه را مشاهده کرده و سوالات احتمالی خود را از ما بپرسید.
صرفه جویی در زمان با طراحی وایرفریم و اسکچ
با استفاده از طراحی وایرفریم ابتدا می‌توانیم طرحی که در ذهن خود داریم را به صورت کلی پیاده سازی کنیم. پس از تایید طرح از سمت کارفرما حال می‌توانیم به جزئیات بیشتری در طراحی خود بپردازیم. در این قسمت از آموزش طراحی رابط کاربری، طراحی وایرفریم برای پروژه‌های UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید. موفق باشید 😍
معرفی منابع و تمرین برای این جلسه
نوبت وایرفریم شد. فایل draft را هم که دارید (در جلسه رنگ‌ها هست). پس بدون معطلی، آن را در فیگما آپلود کنید و مطابق آنچه که در ویدئو بیان کردیم، وایرفریم تمرینی خود را بکشید تا به شما ثابت کنیم فیگما دوست داشتنی و آسان است. برای مطالعه بیشتر، چند مقاله نیز اینجا درج کرده‌ایم. با لذت و عشق، هم تمرین کنید و هم مطالعه کنید و اگر سوالی داشتید بپرسید.
https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw
https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide
https://www.justinmind.com/wireframe/difference-wireframe-vs-prototype-vs-mockup
89 پاسخ
سلام وقتتون بخیر و خدا قوت بابت آموزش های عالی تون 🌹
چرا ویدیو های دوره باز نمیشن؟؟
درود بر شما دوست گرامی، وقت شما بخیر
ساعتی متاسفانه برای هاست ما مشکل رخ داده بود و ویدئوها نشان داده نمیشد. خوشبختانه برطرف شد.
موفق باشید.
سلام مجدد وقتتون بخیر استاد من وایرفریم دسکتاپ ، موبایل و تبلت سایت خودم رو طراحی کردم امکانش هست بفرستم در تلگرام ببینید؟ اینجا پیام دادم ظاهراً پاک شده فکر کنم فیلتر شکن با آیپی ناشناس پیامم ارسال نمیشه
درود بر شما دوست گرامی، وقت شما بخیر
بله اگر دوست داشتید بفرستید (پیشنهاد میکنم ادامه بدید و کل دوره را ببینید و بعدا که تمام شد در جلسه آخر بفرستید).
موفق باشید.
درود مجدد استاد وقت بخیر خسته نباشید با توجه به قابلیت جدیدی که فیگما برای هوش مصنوعی اضافه کرده بنظرتون این اصول هم باید پیش بریم؟ الان من پرامپت بهش دادم یک طراحی قشنگ تحویل داد نظرتون چیه؟ لازمه این مراحل رو پیش بریم؟؟
درود بر شما دوست گرامی، وقت شما بخیر
بله ارشیا جان لازمه. حتی اگر آن دیزاین رو هوش مصنوعی بهت تحویل بده بالاخره باید مسلط باشی به ابزار و نرم‌افزار و مهارت، که بتوانی تغییرش بدهید و برسانی به آن چیزی که می‌خواهی.
موفق باشید.
سلام استاد عزیز. اون تصویر وایرفریم (برای تمرین) که توی ویدئو هستش رو از کجا میتونم بردارم برای تمرین؟ چون از ابتدا تا الان دارم روی اون فایلی که شما داخل سایتتون گذاشتید به اسم goldoni-draft توی همین فایل تایپوگرافی‌و استایل و گرید ساختم و اد کردم. تمرینات اتولیات و ریسپانسیو و همه روی همین فایل هست. الان که وایرفریم رو میخوام تمرین کنم نمیدونم چکار کنم. طرح وایرفریمم رو همینجا امکانش هست بفرستم شما راهنماییم کنید و نظرتونو بگین؟ یا بایستی ایمیل بزنم؟ من اینکارو تازه شروع کردم و قدم به قدم با آموش‌های شما دارم پیش میرم. یه سری چیزها هست گرچه ساده بنظر میاد ولی برام سواله. هم از صبوری‌تون تشکر میکنم و هم عذرخواهی بابت سوالاتم. انقدر آموزش‌هاتون بی‌نظیره که اصلا به هیچ دوره دیگه‌ای نیاز نشد. راهتون سبز و پر از نور و روشنایی
درود بر شما دوست گرامی، وقت شما بخیر
درود بر شما آرام جان. وقت شما بخیر. هم فایل کامل پروژه رو داری که در کامیونیتی هست (لینک شده در صفحه لندینگ دوره) که اگر خواستی می‌تونی ازش خروجی تصویر بگیری. نکته بعدی اینکه فایل draft پروژه رو هم در جلسه رنگ‌ها گذاشتم. چیزی که فرمودی آنجا هست. در همین فایل goldoni-draft هستند تصاویر وایرفریم که فرمودی. در پیج دیزاین. هیچ اشکالی ندارد عزیزم که سوالی بپرسید من در خدمت هستم. هیچ اشکالی هم نداره که اولاش حتی سوالات ما بدیهی هم باشه. هر تخصصی خب اولاش سخت و طول میکشه کمی مسلط بشویم. اتفاقا عالی پیش میری. محکم برو جلو و سوالی بود بپرس.
موفق باشید.
سلام مجدد. بله استاد خودم بودم تو یوتیوب. من آموزشا رو از سایت تون دنبال میکنم که سریع تر پیش برم اما وقتی ویدیو تو یوتیوب میذارین میرم لایک میکنم و دوباره نگاه میکنم چون میخوام تعداد لایکتون بره بالا و برای خودمم مرور بشه و محتوای عالی تون دیده بشه. مطمئن باشین حتما ادامه میدم تازه شیرینی مسیر برام نمایان شده😊 همچنین شما هم شاد و موفق و سلامت باشین
درود بر شما دوست گرامی، وقت شما بخیر
سپاس از مهربانی شما عزیزم. هدف اصلی اینه که محتوا مفید باشه از هر جا دیدی فرقی نمی‌کنه 🌹عالیه مسیرت. دکتر هلاکویی یه جمله معروفی دارن میگن که یکی ورزش کردن و یکی هم یادگیری و بدست آوردن مهارت جدید هست که لذت زیادی میده به افراد. امیدوارم همیشه و هر روز تجربه‌اش کنید.
موفق باشید.
سلام استااااد وقتتون بخیر
استاد من تونستم گام ب گام با شما تایپوگرافی و رنگ ها و استایل ها و… رو درست کنم و الان خیلییییی زیااااد خوشحالم چون تونستم توی این جلسه وایرفریم بزنم واقعا خوشحالم با آموزش شما آشنا شدم هیچکسی مثل شما انقد قشنگ و واضح توضیح نمیده واقفا خداقوت برای تولید محتوای و تدریس عالیتون من خیلی ازش استفاده کردم امیدوارم موفق و موثر باشین
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم از لطف و همراهی شما. خوشحالم که مفید بوده است. ممنونم عسل جان. من در جریان بودم که داری خوب جلو می‌بری چون فکر کنم در یوتیوب هم کامنت از شما داشتم. خیلی عالیه و متوقف نکن. همینطوری ادامه بده و همه ویدئوها رو ببین. درسته که بلدی اما دیدن سایر جلسات هم مفید و کمک‌کننده است. شاد و سلامت باشید همیشه.
موفق باشید.
سلام استاد خسته نباشید
از کچا میتونیم فایل های تمرینی وایر فریم بیشتری پیدا کینم؟
درود بر شما دوست گرامی، وقت شما بخیر
خیلی زیاد هست. واژه wireframe را هم فارسی و هم انگلیسی در کامیونیتی فیگما سرچ بفرمائید. خیلی خیلی موارد متنوع و زیادی هست. در جلسات پیش رو من موارد زیادی را معرفی کرده‌ام. دوره را هم ادامه بدهید با آنها حتما مواجه می‌شوید. ولی خودتان زودتر هم اگر خواستید از کامیونیتی می‌تونید بردارید خیلی زیاده. هم فارسی و هم غیر فارسی.
موفق باشید.
استاد جان ممنون از پاسخگویی‌تون
جسارتا من میخام صفحه ی گریدبندی شده را بردارم تا مثلا طرحم رو بهتر ببینم ولی نمی‌خوام پاکش کنم باید چیکار کنم دکمه ی ویزایبل ش کجاس؟
و سوال دوم: من وقتی کارت محصول رو طراحی کردم هرکار کردم که دقیقا وسط سه تا ستون رو در بگیره نشد اندازه هام دقیق نمیشد منظورم اون کارت داخلیه است چیکار کنم برای تراز شدنش و اینک در پروژه‌های واقعی انقدر دقت مهمه؟ چون بیننده گرید رو نمبینه که!
سوال سوم: من نام‌گزاری‌های فریم‌ها رو به فارسی انجام میدم. میخواستم بپرسم این کار غیرحرفه ایه؟ برای مثلا وقتی که دسترسی بدیم به کسی ک اون بتونه پروژه را ببینه!
این سوال قبلیم هم که ازتون پرسیدم اعداد تراز ک قرمز رنگ هستند گفتین موس رو ببرم سمت اشیا یا تکست اطرافش که نشون بده بازم نشون نمیده! نمیدونم فکر کنم دکمه تنظیماتش خاموشه.
درود بر شما دوست گرامی، وقت شما بخیر
برای اینکه گریدسیستم رو فعال و غیرفعال کنید بدون اینکه نیاز باشد حذفش کنید می‌توانید دکمه Shift + G رو بزنید. دلیل اینکه کارت محصول اندازه‌اش طوری که می‌خواهید نمی‌شود، یکی از این موارد هست. یا پدینگ و مارجین‌ها اندازه نیست. یا اندازه تصویر و عناصر داخلی آن بزرگتر یا کوچکتر است. مثلا ممکن است تایپوگرافی Auto Width نباشد و عرض زیادی گرفته باشد و عرضش از اندازه مناسب آن کارت، بیشتر شده باشد و… بله واقعا این نظم اهمیت دارد و باید انجامش بدهیم. درسته که گریدسیستم و مردم نمی‌بینند. اما خب خط‌کش ما را هم موقع نقاشی و طراحی و معماری نمی‌بینند. اما چرا از آن زیاد استفاده میکنیم؟ چون به کار ما نظم می‌دهد. در خصوص نام‌گذاری، نه اینکه غیرحرفه‌ای باشد. اما بهتر است ترجمه شده و انگلیسی بزاریم. در نسخه پولی فیگما یک هوش مصنوعی وجود دارد خودش نام‌ها را تا حد زیادی درست می‌کند. اما در نسخه رایگان این ابزار را ندارد. در خصوص گرفتن دکمه Alt ببینید دکمه را که پائین نگه داشتید حتما ماوس رو ببرید روی سایر عناصر کناری. در واقع این همین‌طور هست و تنظیماتی برای این مسئله ندارد. پیشفرض این قابلیت را دارد.
خوب دارید پیش می‌روید. سخت نگیرید. اولاش کمی خب طبیعی هست که سخت باشه. ادامه بدید اتفاقات خوبی رخ میده.
موفق باشید.
سلام استاد عزیز و تشکر از تدریس عالی و اینکه همیشه جامع و کامل راهنمایی می‌کنید.
من این دوقسمت رو انجام دادم لینکشو می فرستم بی‌زحمت یک نگاهی بندازید اگر مشکلی وایرادی هست بهم بگید ممنون. من فقط بعضی قسمت‌ها رو کمی متفاوت انجام دادم ولی اصل ظاهرش مشابه ساختم.
درود بر شما دوست گرامی. وقت شما بخیر.
سپاس از لطف و همراهی شما. خیلی خوب بود و wireframe طراحی شده در دو نسخه دسکتاپ و موبایل طراحی شده شده بود. نام‌گذاری‌ها، فواصل، استفاده از اتولیاوت و… مناسب و صحیح بودند. آفرین و درود بر شما.
موفق باشید.
درود فراوان خدمت استاد عزیز. جناب حمداللهی من طبق راهنمایی شما وایر فریم تبلت رو هم طراحی کردم و میخواستم اگر امکانش هست شما یک برسی بفرمایید ببینید ایراد و اشکالی داره. با سپاس فراوان
درود بر شما دوست گرامی. وقت شما بخیر
من لینک ارسالی شما را مشاهده کردم. به نظرم خوب بود و در سطح وایرفریم مشکلی نداشت. یکم میشد فونت‌ها را در برخی جاها مثل منو کوچکتر هم کرد اما همین هم زیاد مهم نیست چون توی وایرفریم خیلی توی چنین جزئیات وارد نمی‌شوند. به نظرم تمرین خوبی بود.
موفق باشید.
سلام استاد وقت بخیر خسته نباشید
توی طراحی وایرفریم موبایل قسمت بلاگ چرا سایزشو گذاشتید 212*318 در صورتی که توی قسمت محصولات برتر گفتید باید اندازه باکس ها مربع باشه؟
درود بر شما. وقت شما بخیر
بله بهتر است باکس‌ها مربعی باشد. (البته ممکنه در مواردی هم مربعی نباشد مثلا نسبت 4 به 3 درست کنند تصویر محصول را. حتی من موارد خاصی دیدم که ارتفاع از عرض بیشتر است. اما رایج‌ترین حالت کارت محصول، همین نسبت مربعی است). توی وایرفریم کمی طبیعی است که چیزی طراحی کنیم که بعدا عوض بشود. البته نه اینکه از عمد این کار را بکنیم. اما ممکن است مثلا تایپوگرافی و اندازه‌ها، بعدا در نسخه high-fidelity بهتر و دقیق‌تر بشوند.
موفق باشید.
درود فراوان خدمت استاد عزیز و سپاس جهت صبوری شما برای پاسخ به سوالات زیاد ما. جناب حمداللهی من یک مشکل اساسی با وایرفریمی که برای تبلت انتخاب کردیم دارم اونم اینکه تو ابعاد 834 برای عرض وایرفریم وقتی من حاشیه 24 از طرفین رو کم میکنم دیگه نمیشه کادر بیشتر از 2 عدد با فواصل صحیح در بیارم. به‌طور مثال وقتی میخوام 4 کادر یک اندازه با فواصل مثلا 16 در بیارم امکانش نیست چون طول اون کادر دقیقا عدد اعشاری میشه (176.5). راه حل چی می‌تونه باشه؟ سپاس فراوان.
درود بر شما دوست گرامی. وقت شما بخیر
در نسخه‌های تبلت و گوشی، گاهی به ستون‌ها دیگه عرض نمی‌دهند. حتی برخی در دسکتاپ هم این کار را می‌کنند اما در تبلت و گوشی رایج‌تر هست. بنابراین اینطوری، صرفا مارجین طرفین و مقدار گاتر را که آنها هم اغلب زوج هستند را درج کنیم، مشکلی رخ نمی‌دهد. برای تنوع بیشتر، من در جلسه دیزاین سیستم کلی، فایل در کامیونیتی فیگما معرفی کردم که در واقع رایج‌ترین و پراستفاده‌ترین دیزاین سیستم‌های فیگما هستند. در آنها نیز نمونه‌های بسیار زیادی از گریدسیستم وجود دارد از آنها نیز می‌توان بهره برد.
موفق باشید.
سلام وقت بخیر ممنون از زحماتتون برای تدریس این دوره
ببخشید میخواستم بدونم برای اینکه فواصل مثلا بین قسمت‌ها و اجزا رو پیدا کنیم کدوم کلیدها رو باید می‌زدیم تا کلا فواصل بین عناصر رو نشون بده. بعضی مواقع خودش نشون میده اما همیشه نه
درود بر شما دوست گرامی. وقت شما بخیر
اگر دکمه Alt را نگه دارید و ماوس را روی عناصر اطراف ببرید، فواصل را به شما نشان خواهد داد.
موفق باشید.
سلام وقت بخیر
تشکر فراوان از زحمات شما. من یک سوال داشتم اینکه مثلا مثل حالتی که ردیوس صفر بود همون دکمه‌های قبلی حالت ردیوس صفر می‌شدند و دیگه مجدد نمی ساختیم این حالت رو چرا برای حالتی که دکمه‌ها بدون آیکون بود نمیشد انجام داد یعنی اول حالت none رو درنظر می گرفتیم که همون دکمه‌های قبلی میشد و بعد حالت‌های چپ و راست را جداگانه کپی می گرفتیم؟
درود بر شما. وقت شما بخیر
اغلب موقع ساخت این قبیل کامپوننت‌ها، حالتی که کمتر تغییرات دارد، به صورت پیشفرض است و بعد همانطور که فرمودید، تغییرات را با واریانت و وریبل و توکن و… به آن اضافه می‌کنند. مثلا درباره واریانت radius خب، اغلب پیشفرض را صفر می‌گذارند که اگر طراح خواست خودش اعمال کند. مثلا مقادیر 0 و 5 و 10 و…
موفق باشید.
سلام استاد خسته نباشید امکانش هست تمرین منو ببینید و نظرتون رو بگید
…
درود بر شما. وقت شما بخیر
دیدمش. خوب بود. متون و دکمه رو به نظرم چپ چین نکنید. درسته که می‌خواستید با تصویر کنارش align کنید و اتفاقا گاهی این کار انجام میشه. ولی اگر راستچین باشه متن و دکمه، تصویر هم سمت چپ همانطوری که گذاشتید، خوبه. در واقع در وایرفریم خیلی نمیشه ایراد گرفت چون طرح اولیه هست. مثلا اگر ایراداتی در تایپوگرافی و چیدمان و فواصل باشه، زیاد مهم نیست. ولی بعدا که high-fidelity بشه و جزئیات اضافه بشه، اون موقع دیگه مهمه.
موفق باشید.
سلام و خسته نباشید خدمت شما. با تشکر بابت این جلسه کامل و عالی. عذرخواهم من احساس میکنم زیاد با سوال‌هام مزاحمت ایجاد میکنم ولی خب احساس میکنم بهتره برطرف بشن سوالاتم.
میخواستم بدونم که من وایرفریم دسکتاپ رو تا به الان طراحی کردم و تموم شد، اما بعضی از قسمت‌ها مثل اندازه‌های فریم‌ها و عکس‌ها و برخی از فونت‌ها رو خودم با سلیقه خودم و بر اساس مقایسه با عکس داخل فایل درست کردم. برای همین ارتفاع وایرفریم دسکتاپم مقداری بیشتر شد از عکس یا میشه گفت فوترم کوچکتر شد. مشکلی نیست؟ چون سعی کردم وسواس کمتری خرج بدم برای اندازه‌ها هرچند سخت بود بعضی قسمت‌ها.
و مورد بعدی اینکه فرمودید توی ویدیو که constrains رو در انتها چک کنیم که همه جا درست بوده باشه. میشه توضیح بدید دقیقا باید جیکار کرد؟
ممنون از صبوری و محبت شما
درود بر شما دوست گرامی، وقت شما بخیر.
هم سوال از علم خیزد هم جواب. هیچ اشکالی نداره. هر تعدادی بود بپرسید. ما به همه آنها پاسخ می‌دهیم به وسع اندک سوادی که داریم. در مورد چیزی که فرمودید نه تنها مشکلی نیست که اندازه‌ها و فونت را متفاوت دادید و به سلیقه خود جلو رفتید، بلکه می‌توانم بگویم که خوب هم هست. این نوعی شهامت هست و اینکه خودمان را در حدی دیدیم که تغییر بدهیم و نظر داشته باشیم، واقعا عالی هست. دقت کنید که هدف شما تمرین کردن هست. اصلا قرار نیست دقیقا همان را طراحی کنید. اگر من در ویدئوها از افراد خواستم مشابه‌اش رو طراحی کنند برای این هست که یک الگویی داشته باشند برای شروع کردن. اما وقتی خود شما بتوانی آن الگو را شخصی‌سازی کنید بهتر هم هست. چون در نهایت اتفاقا ما باید به طراحی تبدیل بشویم که ایده‌های خودمان را اجرا کنیم. در خصوص Constraints صرفا منظورم این بود که نگاهی به بخش‌های مختلف طراحی شده بیاندازیم و اگر چیزی نیاز به تغییر داشت اعمال کنیم. دقیقا مانند آرایشگران که وقتی کارشان تمام می‌شود گاهی با قیچی، یک طوافی دور ما می‌زنند و کار انجام داده خود را چک می‌کنند که چیزی از قلم نیافتد.
موفق باشید.
سلام
ببخشید برای موبایل بجز خود ایکون ی فاصله 16 پیکسلی باشه داخل هدر موبایل هرکاری میکنم خراب میشه
درود بر شما. وقت بخیر
متوجه نشدم که چه چیزی بهم می‌ریزد اما هرچه هست مربوط می‌شود به Auto Layout. بنابراین به لایه‌های Auto Layout شده توجه کنید. هم لایه بالادست و هم عناصر داخلی هدر. عرض fixed شده ناخواسته، باعث می‌شود کل فریم اصلی هم بزرگتر بشود. آنها را باید تنظیم کرد.
موفق باشید.
سلام استاد عزیز خسته نباشید. به نظر شما بهتر نیست که مثلا تایتل و متون بخش های حالت موبایل رو وسط چین قرار بدیم؟ یا مثلا در بخش هیرو سایت اول عکس رو قرار بدیم بعد متن در موبایل؟ آیا اصولی هست ؟
درود بر شما. وقت شما بخیر
گاهی رخ می‌دهد که در هر دو حالت درست باشند. یعنی هم سمت راست بودن و هم مرکز بودن آن عنصر، صحیح است. برخی موارد بهتر است سمت راست باشد. مثلا زمان‌هایی که قرار است سمت دیگر آن، دکمه قرار بگیرد. در بخش بالای سایت بهتر است عنوان دیده بشود و بالا باشد. ما نیز همین کار را انجام دادیم.
موفق باشید.
سلام استاد خیلی ممنون از آموزش های مفیدتون
توی ویدیو های قبلی یادمه شما با ابزار اسکیل قسمت های نسخه دسکتاپ رو با نسخه موبایل مطابقت می‌دادید. کدوم روش بهتره؟
درود بر شما. وقت بخیر
در واقع همه روش‌ها خوب هستند منتهی برخی ممکن است سریع‌تر باشند. مثلا بدی scale کردن این هست که همه چیز را اعشاری می‌کند. عرض و ارتفاع و پدینگ و مارجین و حتی موقعیت x و y. بنابراین به این نگاه کنید که کدام روش برای شما آسان‌تر و سریع‌تر هست.
موفق باشید.
سلام وقت بخیر استاد این جلسات بروز شدند؟
درود بر شما آقا ارسلان. وقت بخیر
بله تا پایان 25 بروز شده. تا یک هفته بعد بروز کردن دوره تمام میشه.
موفق باشید.
سلام وقتتون بخیر و خداقوت بابت این دوره ی فوق العاده:)
اکثر مباحث خیلی عمیق و کامل بیان شده و من فقط یه خلاء کوچیک میبینم که بشخصه برام چالشی تر از باقی مسائله: اونم بحث ایده و قواعد طراحی وایرفریم و اسکچ از پایه ست.
دقیق تر اینکه شما برای طراحی وایرفریم درین جلسه، یک نمونه از قبل آماده رو بازسازی کردین. بنظرم مهم تر اینه که اصل ایده کلی چطور بدست اومده و اصلا تعریف طراحی رابط کاربری هم فکر میکنم همینه.
خیییلی عالی میشه اگه محتوای بیشتری درین باره بسازین. کمک بزرگیه!
درود بر شما. وقت بخیر
این جلسه و جلسات بعد از آن هنوز بروز نشدند و محتواهای جدید که تا آخر تیرماه روی سایت درج خواهند شد، متفاوت هستند. در خصوص ایده‌پردازی، ساخت نمونه‌کار و پلتفرم‌هایی مثل دریبل، مجزا جلسه برگزار کرده‌ایم و در دوره همین الان هم وجود دارد که بعدا بروز هم خواهند شد.
موفق باشید.
ممنونم ازتون
خدا قوت واقعا که زمان و انرژی میذارید
پس فایل پروژهای که کار می‌کنید تو فیلم‌ها، مثلا اون تایپوگرافی‌ها و دکمه‌های کامپوننتی که جلسه قبل ساختید هم بعد از اپدیت کامل قرار می‌دین؟
درود بر شما. وقت بحیر
بله دوره کامل بشود حتما درج خواهیم کرد. مستندات، فایل، تمرین و سایر جلسات. روی همه آنها داریم کار میکنیم و یک ماهی زمان می‌برد. خیلی تولید آنها دشوار است اگر بخواهیم روی کیفیت حساس باشیم.
موفق باشید.
سلام وقتتون بخیر
ممنون بابت آموزش خوبتون
یه سوالی داشتم تو بعضی از جلسات مثل این جلسه گفتید یه سری از فایل های پروژه رو قرار می دیدن تا به عنوان نمونه داشته باشیم اما اصلا تو سایت پیداشون نمی کنم میشه لطفا راهنمایی کنید
درود بر شما. وقت بحیر
سپاس از لطف و همراهی و مهربانی شما دوست عزیز. هنوز درج شون نکردم. هنوز 18 جلسه از دوره بروز شده. حتما تا یکی دو ماه دیگر دوره کامل میشه. خیلی بروزرسانی و تولید محتواش کار سختی هست. گاهی تهیه صرفا یک ویدئو نیم ساعته، چند ساعت ازم وقت میگیره. اما حتما کاملش میکنم. مقالاتی هم که می‌خواهم بگذارم عمدتا مقالات سایت‌هایی مثل nngroup.com هست و سایت‌های معروف دیگر در این زمینه. حتما درج‌شان خواهم کرد.
موفق باشید.
خداقوت واقعا
آموزش ها به طرز شگفت انگیزی و به معنای واقعی کلمه بی نظیر ✨🤩
فقط یه سوال، تا این ویدئوها، جایی اشاره نکردید که چرا متن ها جاستیفای نباشن؟ 👀
درود بر شما. وقت بحیر
خوشحالم اگر مفید واقع شده است. سپاس از لطف و همراهی شما دوست عزیز. در جلسه دسترسی‌پذیری به این موضوع اشاره کرده‌ایم. جاستیفای بودن متن باعث می‌شود بین حروف و کلمات فاصله ایجاد شود و این کشیدگی و فواصل، خوانایی را سخت‌تر می‌کند. تقریبا تمام برندهای بزرگ اعم از داخلی و خارجی، از جاستیفای استفاده نمی‌کنند. کلا متون تا سه خط می‌تواند وسط‌چین هم باشند اما اگر بیش از سه خط باشد، بهتر است راستچین باشد. (اگر هم انگلیسی هست و بیش از سه خط است بهتر است چپ‌‌چین باشد).
موفق باشید.
سلام استاد وقتتون بخیر
ممنونم بابت آموزش‌های خوبتون
یه سوال داشتم:
من فریم وایرفریمم رو بر اساس اندازه‌ی فریم دسکتاپ تنظیم کردم، اما هنگام چیدمان بعضی از بخش‌ها از پایین با کمبود فضا مواجه می‌شم.
ارتفاع فریم رو که زیاد میکنم، چیدمان بقیه‌ی بخش‌ها به هم میریزه.
میخواستم بدونم بهترین راه‌حل برای این موضوع چیه؟
درود بر شما. وقت بخیر
اگر مقدار Constraints برای فریم‌های بالاتر مثلا روی جهت پائین تنظیم شده باشند، هنگامی که فریم اصلی را بزرگ میکنیم، قاعدتا آن عناصر هم حرکت می‌کنند. مقوله اعصاب خورد کنی هست اما می‌توان آن را برطرف کرد. اگر Constraints رو نمی‌شناسید حتما جلسه Auto Layout رو مشاهده بفرمائید. در واقع باید فریم‌هایی که ناخواسته حرکت می‌کنند رو Constraints شون رو تغییر بدید.
موفق باشید.
سلام استاد وقتتون بخیر!
گرید وایرفریم موبایل برای من 5 تا ستون ایجاد کرد. و براساس اون وایرفریم رو ساختم اما در ویدیو برای شما 4 تا ستون داره.
گریدش الزاما باید 4 تا باشه؟ یا گرید من اشتباه هست؟ (گرید ها رو طبق دستور کار دوره ساختم).
درود بر شما. وقت بخیر
برای گوشی گرید 4 تایی کمی بهتر است. البته این به این معنی نیست که گرید 5 اشتباه است. کلا گریدهای زوج کمی بهتر هستند. در جلسه گریدسیستم و فاصله‌گذاری، در این خصوص خیلی صحبت کردیم. حتما آن جلسه را هم مشاهده بفرمائید.
موفق باشید.
سلام وقتتون بخیر
من حقیقتا یکم با سایز ها و فاصله ها مشکل دارم اینکه بر چه اساسی باید باشن که استاندارد باشن
درود بر شما. وقت بحیر
جز موضوعاتی هست که تمرین + دیدن نمونه، بسیار می‌خواهد. حتما جلسه گریدسیستم و فاصله‌گذاری را هم ببینید اگر مشاهده نکردید. در جلسه این موضوع را مجزا باز کرده‌ایم.
موفق باشید.
سلام برشما!
وقتی میخوام عدد تایپ کنم به انگلیسی اعداد رو تایپ میکنه در حالی که کیبوردم فارسیه و فونت های فارسی رو هم دانلود کردم برای فیگما
مشکل از کجاست؟
درود بر شما. وقت بحیر
حتی فونت فارسی باشد هم ممکن است اعداد را به دلایلی انگلیسی بنویسد. مثلا فونت وزیرمتن یک فونت وریبل یا متغیر است. پیشفرض اعداد را انگلیسی می‌نویسد مگر اینکه در بخش تنظیمات تایپوگرافی تنظیم کنید که اعداد را فارسی بنویسد. به طور کل این قابلیت حرفه‌ای فونت‌های جدید است. چون باعث می‌شود با یک فایل، از حالت‌های مختلف فونت استفاده کنید. من در جلسه تایپوگرافی در خصوص فونت‌های وریبل و این مسائل زیاد صحبت کردم. حتما آن جلسه را هم مشاهده بفرمائید.
موفق باشید.
سلام وقتتون بخیر ممنونم بابت زحماتتون، من یه سوال دارم؛ میخوام بدونم میشه استایل هایی که توی یه پروژه ذخیره کردیم رو کپی کنیم و توی یه پروژه دیگه استفاده کنیم؟
درود بر شما. وقت بخیر
جدیدا فیگما قابلیتی ایجاد کرده که می‌توانید روی استایل‌ها کلیک راست کنید، کپی کنید و به پروژه دیگری ببرید. البته می‌توانید از کل پروژه خود هم داپلیکیت بگیرید (در صفحه اصلی فیگما و با کلیک راست روی هر پروژه). اینطوری کل پروژه کپی شده و می‌توانید مواردی که نمی‌خواهید را حذف کنید و پروژه را پیش ببرید. (البته حالت اول که به تازگی اضافه شده، آسان‌تر خواهد بود).
موفق باشید.
وقت بخیر و ممنون بابت دوره ی فوق العاده تون و زحمت زیادی که کشیدید🙏🌸
ببخشید یه سوال دارم
اگر برای بخش های مختلف نام گذاری نکنیم، چه اتفاقی میوفته؟ اهمیت نام گذاری رو متوجه نشدم
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما. این موضوع شبیه است به حساسیت مامان‌ها برای تمیز بودن پشت یخچال و زیر میز و خیلی جاهای دیگه که شاید چندان هم دیده نمی‌شدند. ممکن بود نپذیریم اما زمان که سپری شد و بزرگتر که شدیم متوجه شدیم که حرف مامان‌ها درست بود. درسته که نام‌گذاری لایه‌ها در خروجی پروژه شما دیده نمی‌شود. اما وقتی پروژه را به برنامه‌نویس تحویل می‌دهید، آنها از فریم‌ها و تصاویر خروجی می‌گیرند و این کمی کارشان را آسان‌تر می‌کند اگر نام داشته باشد. (البته این را هم در نظر بگیرید رعایت این موضوع در مرحله وایرفریم اهمیت کمتری دارد چون قصد داریم در زمان کوتاهی پروژه را طراحی کنیم و از کارفرما یا ذینفعان، تائید بگیریم. اما در مرحله پروتوتایپ (یا اصطلاحا High-Fidelity باید نام‌گذاری کنیم و ترو تمیز تحویل بدهیم).
موفق باشید.
سلام استاد خوبین؟ خیلی خوشحالم که ما دانشجو های شما هستیم و میتونیم از دریای علم و مهارتتون بهره ببریم
من یک مشکلی دارم توی طراحی وایرفریم موبایل قسمت مشاوره دقیقا مثل شما طراحی میکنم و با همون اندازه ها اما وقتی میارمش توی فریم موبایل فاصله اش با بالایی 0.85 اعشار میگیره هر کاری هم برای درست شدنش کردم اما نمیدونم چرا درست نمیشه مثلا فاصلش به جای 80 پیکسل میشه 79.85پیکسل و اگرم ی جوری اینو رند کنم سمت راست منو عدد قسمت y توی فیگما 0.15 اعشار میگیره. بنظرتون مشکل از کجاست؟
درود بر شما. وقت بخیر
ببینید در عناصر بالایی حتی یک عنصر هم مقدارش اعشاری بشود (و یا پدینگ و مارجین و فواصل) این اتفاق رخ می‌دهد. بنابراین باید لایه‌های بالا و فواصل آنها را بررسی کنید ببینید که کدام عنصر فاصله اش اعشاری شده است. چون همه اعداد هم که اعشاری نباشد و یک عنصر فقط اعشاری بشود (خصوصا در ارتفاع) این موضوع ممکن است رخ بدهد.
موفق باشید.
سلام استاد امیدوارم عالی باشین
یادمه توی یکی از ویدیوها یاد دادین که چجور یک آیکن یا لایه رو بدون اینکه بر روی آتولایت یک فریم تاثیر بزاره به اون اضافه کنیم و یادمه گفتین مث هلیکوپتر هرجا بزاری همونجا وایمیسه. میخواستم ببینم چیو باید فعال میکردیم که این حالتی بشه؟ توی ایام امتحانات دانشگاه هست حافظم یاری نکرد و یادم نیست تو کدوم ویدیو بود. ممنون:)
درود بر شما. وقت بخیر
این مورد زمانی رخ می‌دهد که ما یک فریم را Auto Layout کرده‌ایم اما قصد داریم یک یا برخی از عناصر داخل آن را به صورت دلخواه هر قسمتی که خواستیم قرار بدهیم. اصطلاحاً در CSS Positioning به آن Absolute می‌گوئیم. در فیگما هم قبلا اسمش Absolute Position بود که اخیرا اسم آن در نرم‌افزار شده Ignore Auto Layout که یک آیکن هست که در سایدبار سمت راست قرار دارد.
موفق باشید.
مرسی استاد، فقط با این وجود آتو لیوت لایه زیری از بین میره مشکلی پیش نمیاد؟
درود بر شما. وقت بخیر
خیر مشکلی رخ نمی‌دهد. چون عنصری که ignore Auto Layout شده کاری به عناصر Auto Layout شده داخلی ندارد و به صورت شناور کنار آنها قرار دارد.
موفق باشید.
سلام آقای حمداللهی وقت بخیر.من نمیدونم چرا میخوام فونتمو تغییر بدم اصلا چشمم گزینه تغییر فونت رو نمیبینه فقط سایزایی که طراحی کرده بودمو میبینم.چیکار باید کنم؟ ضمنا فیگما تحت وب دارم استفاده میکنم.میخواستم اسکریت شات بفرستم اما اینجا نمیشه
درود بر شما. وقت بخیر
یکی از آن فونت‌هایی که به عنوان تایپوگرافی ساخته‌اید، انتخابش هم کرده‌اید برای متن مدنظر. برای همین هر موقع روی آن متن کلیک کنید، آن تایپوگرافی به صورت انتخاب شده یا Attach شده دیده می‌شود. بنابراین ابتدا آنرا Detach کنید (آیکن‌اش همانجاست) و سپس تنظیمات مدنظر را انجام بدهید.
موفق باشید.
درود استاد بنده این جلسه رو هم تموم کردم و خیلی لذت بخش بود با اموزش شما. ممنون از زحماتتون.
فقط یک سری سوالات مبهم ذهن منو درگیر کرده و همش به اینا فکر میکنم چون تابحال در این زمینه اصلا کار نکردم.
شما برای قسمت راهکار ها چهارتا کادر ایجاد کردید. از کجا فهمدید که باید چهارتا کادر بدید در اون قسمت چرا سه تا درست نکردید؟ کارفرما میگه که مثلا چندتا خدمات ارائه میده و ما بر اساس اون درست میکنیم؟
یا مثلا یک سری متن نوشتید در مورد داستان تشکیل پویا
یا متنهای زیر هدر و یا شعاری که زیر اژانس خلاقیت پویا نوشتید این متنارم باید ما پیدا کنیم و بنویسیم یا اینکه کارفرما میگه چی بنویسیم؟
بعدش در قسمت بلاگ پویا سه تا کادر ایجاد کردید و عنوان مقالات سایت رو اونجا نوشتید. ما از کجا بدونیم باید سه تا کادر واسه مقالات اماده کنیم یا اینکه عناوین مقالاتی که قراره در سایت قرار داده بشه چی هست؟ یا کارفرما میگه مثلا واسه سه تا مقاله با فلان عناوین سه تا محل مناسب درست کنید؟
سوال اخرم اینکه در قسمتی که زدید preview رو نشون بده باید رو کدوم حالت بزاریم حالت نمایش رو؟ در حالت actual size(100%) مارجین هارو به خوبی نشون نمیده و از سمت راست میچسبه به مانیتور. ولی در حالت fit width درست نشون میده.
خیلی شرمنده زیاد شد.
درود بر شما. وقت بخیر
بله کارفرما خواهد گفت که چه مواردی را می‌خواهد. همچنین برخی از محتواهای متنی و… را نیز ممکن است به ما ارائه کند. گاهی هم اگر آماده نباشد طراحان از متون “لورم ایپسوم” استفاده می‌کنند. این موضوع شامل اغلب بخش ها از جمله مقالات هم می‌شود. در بخش preview حالت‌های مختلفی وجود دارد. برای این هست که چه کارفرما و چه طراح، با حالتی که راحت‌تر هستند بتوانند پروژه را بررسی کنند.
موفق باشید.
بله استاد متوجه شدم. تشکر
سلام و خسته نباشید استادگرامی.
یه سوال داشتم وقتی ما در این ویدیو و تمرین دکمه‌های مختلف رو با سایز یکسان (در اینجا small) استفاده کردیم ولی متنش رو یا آیکون رو عوض کردیم عرض دکمه زیاد و کم شد؟ مگه نباید همون سایز small بمونه؟
درود بر شما. وقت بخیر
در خصوص آیکن این را بگویم که آیکن‌ها همگی در پکیج iconsax به صورت 24 پیکسل هستند. البته ما آن را موقع طراحی دکمه، به 16 پیکسل تغییر دادیم. بنابراین آیکن را اگر تغییر بدهید باز هم عرض و ارتفاع آن 16 پیکسل است و این باعث تغییر در عرض دکمه نخواهد شد. در خصوص ارتفاع نیز با یکدیگر صحبت کرده بودیم. بیان شد که ارتفاع رو دستی می‌دهیم و از اعداد نسبت 8 اغلب استفاده میکنیم. اما اینکه با تغییر متن، عرض دکمه تغییر کند، طبیعی هست و لزوما هم اتفاق منفی به حساب نمی‌آید. فقط برخی جاها به دلایلی ممکن است دکمه را تمام عرض کنند (گاهی در نسخه موبایل) و یا گاهی ممکن است دو دکمه را بخواهند کنار هم بگذارند که در این صورت نیز ممکن است عرض هر دو دکمه را نیز اندازه هم کنند.
موفق باشید.
سلام استاد خسته نباشید.
در ویدیو دوم وقتی دکمه تیم ما رو ساختیم (متنش رو از آموزش ها به تیم ما تغییر دادیم) چرا عرض دکمه کوچیک تر شد؟ مگر نباید ثابت بمونه؟
درود بر شما. وقت بخیر خانم اعدلیان
در جلسه ساختن کامپوننت و uikit مربوط به دکمه‌ها، اگر خاطرتان باشد ارتفاع‌ها را به صورت نسبت 8 وارد کردیم. یعنی مقادیری همچون 32 و 40 و 48 و 56 و… دلیل آن هم این هست که فونت‌ها، گاهی line-height ها باهم متفاوت هستند. ترجیحاً باید ارتفاع دکمه‌ها مقادیری زوج و مشخص باشند. اما در عرض دکمه چنین چیزی وجود ندارد. چون مشخص نیست که متن دکمه چقدر طولانی هست. مثلا یک کلمه هست یا دو کلمه. (یک استثنا هم وجود دارد. گاهی 2 دکمه وقتی کنار هم قرار می‌گیرند، حتی عرض آنها را هم به صورت یکنواخت یا هم‌اندازه می‌گذارند اما به حالت پیشفرض، موقع طراحی uikit مربوط به دکمه‌ها، صرفاً ارتفاع را دستی وارد میکنیم و عرض را می‌گذاریم همان به صورت Hug بماند).
موفق باشید.
با سلام و وقت به خیر
در ویدئو سوم این بخش دقیقه 4:07 وقتی دارم قسمت بلاگ پویا، اون کامپوننت ها رو درست میکنم مثل شما پیش رفتم اما وقتی اتولایوت میزنم همه چی متاسفانه بهم میریزه دلیلش چیه؟
درود بر شما. وقت بخیر
در این قسمت از ویدئو در حال ساخت یک کارت بلاگ (در حالت وایرفریم) هستیم. عناصر باید زیر هم باشند (از نظر لایه‌بندی آنها). بعد آنها را Autolayout کنیم و سپس حالت Autolayout را به صورت عمودی قرار بدهیم و پس از آن مقادیر پدینگ و مارجین را نیز اصلاح کنیم. بحث Autolayout کمی دشوارتر از سایر مباحث است. اگر به آن مسلط بشویم خیلی سرعت طراحی بالا می‌رود. بنابراین حتما جلسه 17 را باز هم مشاهده کنید.
موفق باشید.
سلام حضور محترم استاد گرامی
میشه لطفا بفرمایید فونت استفاده شده در هدینگ ها چه فونتی هست؟
منظورم همین فونتی هست که شما در ساخت وایر فریم استفاده کردید
درود بر شما. وقت شما بخیر.
فونت عنوان “پلاک” هستش. در سایت fontiran.com می‌توان آن را تهیه کرد.
موفق باشید.
سلام
توی ویدیو اول وقتی هدلاین و پاراگراف و دکمه ها رو درست میکنم هیچ مشکلی نیست اما وقتی همه رو با هم auto layout میکنم دوتا دکمه کنار هم با پاراگراف بالا قاطی میشه
درود بر شما. وقت شما بخیر
در Autolayout بایستی لایه‌بندی‌ها را به صورت افقی یا عمومی بچینیم. مثلا اگر شما عنوان، زیرعنوان، دو دکمه و یک متن دارید، اینها بایستی Autolayout عمودی داشته باشند. اما از آنجایی که می‌خواهیم دکمه‌ها کنار هم باشند، بایستی آنها را هم Autolayout کنیم ولی اینبار به صورت افقی. در واقع مقادیر Autolayout را در این بخش به صورت Nested یا تودرتو نیز بایستی انجام داد که عناصر مرتب بشوند.
موفق باشید.
سلام
استاد من موقعی که شماره تلفن رو در قسمت مشاوره رایگان دارم مینویسم، از سمت چپ اول 2729 میشینه و بعدش021. با راست چین ،چپ چین شدن هم درست نشد!
درود بر شما. وقت بخیر
اشکالی نداره. برای من هم همینطوری هست. ابتدا 2729 را بنویسید و بعد خط فاصله بگذارید و سپس 021 را بگذارید. اینطوری مشکل حل می‌شود.
موفق باشید.
سلام استاد، واقعا ممنونم آموزش هاتون عالی بود. یک راهنمایی می خواستم لطفا. من برای اینکه رزومه قوی بتونم برای کارهام داشته باشم توی چه وب سایت هایی باید نمونه کار بزارم؟ من فقط “dribbble رو میشناسم. و آموزشی برای کار با این وب سایت ها دارید؟
درود بر شما. وقت بخیر
سپاس از شما.
من در جلسه آخر خیلی این موضوع رو توضیح دادم. شاید هنوز اون جلسه رو ندیده باشید. الان خلاصه ای از آن رو بیان میکنم ولی حتما آن جلسه رو هم به ترتیب و در ادامه آموزش‌ها، مشاهده بفرمایید.
ببینید dribbble یکی از پلتفرم‌ها هستش. مواردی مثل behance هم هستن. در سایت behance اغلب کیس استادی می‌گذارند. پیشنهاد میکنم ابتدا چند نمونه‌کار بسازید و در dribbble بگذارید. بعد اگر حوصله فعالیت در اینستاگرام رو داشتید اونجا شروع کنید هم نمونه‌کارهای خودتون رو موکاپ کنید و بگذارید (در خصوص موکاپ کردن در دریبل و اینستاگرام آموزش داریم در دوره و مفصل توضیح دادیم). هم اینکه حتی اگر خواستید یواش یواش پست‌های آموزشی هم بگذارید تا پیج‌تون بیشتر مخاطب بگیره و کارفرماها بتونن نمونه‌کارهای شمارو بیشتر ببینن و ارتباط بگیرن.
حتی می‌توانید دوره وردپرس رو ببینید و برای این موضوع سایت هم راه‌اندازی کنید. اما خب این کار کمی سخت‌تر هست و می‌توانید در قدم اول ابتدا روی dribbble و linkedin و instagram پروژه‌های خودتون رو موکاپ کنید و منتشر کنید.
موفق باشید.
سلام خسته نباشید و ممنونم از اینکه این دوره رو رایگان در اختیار ما قرار دادید
یه سوال داشتم من میتونم wireframe رو اینجوری نسازم و شکل skeleton اگه درست نوشته باشم از اون طریق بسازم و اسم بخش هارو موقع high-fi از طریق اسمی که براشون توی low-fi انتخاب کردم بفهمم و تو high-fi ازش استفاده کنم ؟ یا نه این روش وایرفریم که شما رفتید بهتره ؟
و اینکه تو شرکت بهم میگن از کدوم روش برم یا نه خودم انتخاب میکنم که وایرفریم از این طریق بسازم یا یه طریق دیگه؟
در نهایت بازم ممنونم
درود بر شما دوست گرامی، وقت بخیر.
سپاس از لطف شما.
هم روشی که بنده در این جلسه عرض کردم صحیح هست و هم موضوعی که شما فرمودید. در واقع ممکن است خود وایرفریم‌ها نیز در مقیاس‌های مختلفی ارائه شوند. مثلا ممکن است در شرکتی، برای یک محصول دیجیتال، زمان قابل توجهی صرف بشود و طبیعتا روی وایرفریم هم وقت بیشتری گذاشته بشود. از طرفی هم ممکن است صرفا اسکلت وایرفریم ایجاد شود که اصطلاحا به آن reference zone هم می‌گویند. البته قطعا اگر وایرفریم کامل‌تر باشد بهتر هست و قدم نهادن به سمت High-Fidelity بعدا آسان‌تر می‌شود. اما به هرحال ممکن است در برخی شرکت‌ها و یا برخی پروژه‌ها، به‌دلایل مختلف مانند کم بودن زمان، وایرفریم بسیار ساده تر اجرا بشود.
موفق باشید.
سلام وقت بخیر، اومدم فقط تشکر کنم ازتون واقعا دوره شما از هر چی دوره دیگه تهیه کرده بودم کامل تر بوده تا اینجا
خیلی ممنون از شما
با آرزوی بهترین ها
درود و سپاس از همراهی شما
خوشحالم که مورد توجه قرار گرفته است.
موفق باشید.