آموزش طراحی رابط کاربری برای توسعه. دوره ای برای طراح UX/UI (اسکچ و تصویر)

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

در حال بحث و گفتگو درباره جزئیات با مشتریم و سپس ارسال و فکر می کنم کارم تمام شده است.

و سپس آن را در مرورگر دیدم. اصلا شبیه آن چیزی که تصور می‌کردم نبود!

نمی‌دانستم چرا چیز واقعی با طرح‌های من متفاوت به نظر می‌رسد.

نمی‌دانستم چرا تصاویر در برخی از صفحه‌ها تار و در برخی دیگر واضح هستند.

نفهمیدم چرا تایپوگرافی من مانند آدامس به هم چسبیده است

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

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

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

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

بنابراین در این کلاس با موارد زیر آشنا خواهیم شد:

1. همه عناصری که توسعه دهندگان از شما نیاز دارند

2. طراحی و ابزارهای مختلف در بازار برای کمک به شما

3. راه اندازی  Stylesheets به بهترین روش

4. صادرات دارایی ها در شکل و اندازه مناسب

5. تنظیم کتابخانه‌های مؤلفه و مشخصات

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

7. ما همچنین نحوه به اشتراک گذاری طرح های Figma یا Sketch خود را با تیم توسعه به شیوه ای حرفه ای بررسی خواهیم کرد.

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

© moonlearning.io با یادگیری ماه

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

برای دانلود فایل های دوره

وارد کردن فایل‌ها به Figma (استفاده رایگان)

1. روی نماد  Import File  در کنار دکمه   New File  در نوار ابزار کلیک کنید. می‌توانید آن را در گوشه سمت راست بالای هر صفحه فایل در مرورگر فایل پیدا کنید.

2. فایل(های) را از پنجره گفتگو انتخاب کنید و روی باز کردن کلیک کنید تا فرآیند وارد کردن شروع شود.

3. بسته به اندازه فایل، وارد کردن آن ممکن است چند ثانیه طول بکشد. برای بازگشت به مرورگر فایل روی «انجام شد» کلیک کنید.

4. همچنین می‌توانید فایل‌ها را روی فضای کاری خود بکشید و رها کنید.

من از برنامه استفاده می‌کنم، یا به صورت رایگان دانلود کرده و روی رایانه خود نصب کنید یا از برنامه Figm (همراه با تمام فونت‌های گوگل از پیش بارگذاری شده، total dream) استفاده می‌کنم تا هشدارهای فونت را از دست ندهم.