آموزش طراحی رابط کاربری برای توسعه. دوره ای برای طراح UX/UI (اسکچ و تصویر)
UI Design Handoff to Development. A course for UX/UI Designer (Sketch & Figma)
من به یاد دارم که اولین طراحی وب خود را برای توسعه تحویل دادم. من فوق العاده هیجان زده بودم و ساعت ها وقت گذاشتم تا همه چیز را کامل کنم.
در حال بحث و گفتگو درباره جزئیات با مشتریم و سپس ارسال و فکر می کنم کارم تمام شده است.
و سپس آن را در مرورگر دیدم. اصلا شبیه آن چیزی که تصور می‌کردم نبود!
نمی‌دانستم چرا چیز واقعی با طرح‌های من متفاوت به نظر می‌رسد.
نمی‌دانستم چرا تصاویر در برخی از صفحه‌ها تار و در برخی دیگر واضح هستند.
نفهمیدم چرا تایپوگرافی من مانند آدامس به هم چسبیده است
نمی‌دانستم چرا همه‌چیز کمی سرتاسر بود.
و من حتی نمی خواهم به آنچه در اندازه های مختلف صفحه نمایش رخ داده است اشاره کنم.
و وقتی برای رفع این مشکل راهنمایی خواستم، در ترجمه گم شدم. بنابراین شروع به مطالعه و تحقیق کردم. من با طراحان و توسعه دهندگان دیگر صحبت کردم. من ابزارها و تکنیک های مختلفی را امتحان کردم که می خواهم با شما به اشتراک بگذارم.
این دوره برای مبتدیان طراحی وب یا طراحان رابط کاربری پیشرفته طراحی شده است که برای بهبود تجربه انتقال خود بین طراحی و توسعه پیشرفت می کنند.
بنابراین در این کلاس با موارد زیر آشنا خواهیم شد:
همه عناصری که توسعه دهندگان از شما نیاز دارند
طراحی و ابزارهای مختلف در بازار برای کمک به شما
راه اندازی Stylesheets به بهترین روش
صادرات دارایی ها در شکل و اندازه مناسب
تنظیم کتابخانه‌های مؤلفه و مشخصات
درک واقعی شبکه‌های واکنش‌گرا و تایپوگرافی برای تصمیم‌گیری درست در طراحی اولیه در مراحل طراحی خود
ما همچنین نحوه به اشتراک گذاری طرح های Figma یا Sketch خود را با تیم توسعه به شیوه ای حرفه ای بررسی خواهیم کرد.
بنابراین، به طور خلاصه، در پایان این کلاس، شما راه اندازی عالی برای طرح خود خواهید داشت تا به شکلی که تصور می کردید کدگذاری شود. و توسعه دهندگان شما نیز احتمالاً شما را کمی بیشتر دوست خواهند داشت.
© moonlearning.io با یادگیری ماه
در مثال خود، من در حال راه اندازی یک صفحه نمونه کار هستم. می توانید در کنار این مثال کار کنید. با این حال، می‌توانید از یک طرح قدیمی‌تر و از قبل موجود نیز استفاده کنید و آن را برای توسعه پیش ببرید یا ایده‌های جدیدی داشته باشید. نکته مهم این است که بدانید فایل ها چگونه ساختار یافته اند تا در هنگام کدگذاری بهترین نتایج را داشته باشند.
برای دانلود فایل های دوره
وارد کردن فایل‌ها به Figma (استفاده رایگان)
- روی نماد Import File در کنار دکمه New File در نوار ابزار کلیک کنید. می‌توانید آن را در گوشه سمت راست بالای هر صفحه فایل در مرورگر فایل پیدا کنید.
فایل(های) را از پنجره گفتگو انتخاب کنید و روی باز کردن کلیک کنید تا فرآیند وارد کردن شروع شود.
بسته به اندازه فایل، وارد کردن آن ممکن است چند ثانیه طول بکشد. برای بازگشت به مرورگر فایل روی «انجام شد» کلیک کنید.
- همچنین می‌توانید فایل‌ها را روی فضای کاری خود بکشید و رها کنید.
من از برنامه استفاده می‌کنم، یا به صورت رایگان دانلود کرده و روی رایانه خود نصب کنید یا از برنامه Figm (همراه با تمام فونت‌های گوگل از پیش بارگذاری شده، total dream) استفاده می‌کنم تا هشدارهای فونت را از دست ندهم.
درس ها Lessons
-
سلام چجوری و چرا Hello, what how and why
-
مروری بر ابزارهای طراحی و انتقال Overview of design & handoff tools
-
سبک های دیگر Other styles
-
مطالب دوره و دانلود Course Material & Download
-
درک شبکه های پاسخگو Understanding responsive grids
-
آیا می توانم از InDesign، Illustrator یا Photoshop استفاده کنم؟ Can I use InDesign, Illustrator, or Photoshop
-
تصاویر، بردارها و دارایی های صادراتی Images, vectors & exporting assets
-
08 شیوه نامه تایپوگرافی 08 Typography stylesheet
-
توسعه دهنده از من چه نیازی دارد؟ What does the developer need from me?
-
متشکرم Thank You
-
قبل از اینکه بری Before you go
-
ساختار فایل و راهنما File structure and helpers
-
بررسی اجمالی اجزا و حالت ها Components overview and states
-
نگاه کردن به کد Code peek
-
به روش درست با فیگما دست به دست کنید Handoff with Figma the right way
-
Handoff with Sketch: Figma + tool handoff (Zeplin) Handoff with Sketch:Figma + handoff tool (Zeplin)
-
برگه سبک رنگی Colour stylesheet
-
مقدمه Intro
-
راه اندازی و مستندسازی طرح های پاسخگو و تطبیقی Setting up & documenting responsive and adaptive designs
-
مقایسه Figma، Sketch + ابزار دستیابی انتخاب شده (Zeplin، Abstract، InVision) Comparing Figma, Sketch + selected handoff tool (Zeplin, Abstract, InVision)
-
فلوچارت و نمونه های اولیه Flowchart and prototypes
-
تعریف سیستم شبکه و فواصل Defining grid system & distances
https://donyad.com/d/d641ab
Christine Vallaure
UI/UX DESIGN + CODE
طراح UX/UI با علاقه به کد و بنیانگذار .
من در سطح بین‌المللی، داخلی و از راه دور روی پروژه‌هایی برای برندها، آژانس‌ها و استارت‌آپ‌های پیشرو کار کرده‌ام. من عمیقاً به ایجاد محصولاتی با فکر و زیبایی اهمیت می دهم. کارهای من از ایده‌های اولیه گرفته تا طرح‌ها، وایرفریم‌ها، نمونه‌سازی اولیه و تنظیم جلویی را شامل می‌شود.
علاوه بر پروژه‌های مشتری (بازدید برای منابع)، من در حال ساختن یک پلتفرم یادگیری آنلاین برای طراح UX/UI. من همچنین در مورد کد طراحی در رسانه و من می نویسم.
برای اطلاعات بیشتر درباره من لطفاً به من مراجعه کنید صفحه LinkedIn .
نمایش نظرات