۲ علی قربان زاده
تفاوت prototype , mockup ,wireframe
جامعه Html & CSS ایجاد شده در ۰۹ تیر ۱۳۹۹

سلام خدمت همگی

 

به طور کلی این سه حالتو در نظر بگیرید 

wireframe : طرح و نقشه ی اولیه بدون ظاهر گرافیکی 

mockup : همون طرح و نقشه ولی با رنگ لعاب نهایی پروژه و ظاهر گرافیکی

prototype : شبیه سازی و پیش نمایش از محصول نهایی با امکان تعامل کاربر 

 

وایرم فریم چیزیه که روی کاغذ میکشیم و صرفا ساختار رو بهمون نشون میده و هیچ ظاهر گرافیکی نداره در حقیقت نشونگر ساده‌ترین حالت ui  پروژه اس 

wireframe

 

موکاپ حالت‌تر تمیز‌تر و رنگ ولعاب دار و طراحیه گرافیکیه پروژست و استاتیکه ,یعنی نشون دهنده ی طرح نهاییه پروژست 

mockup

 

و اما پروتوتایپ شبیه سازی تقریبا کامل از پروژست که کاربر میتونه کلیک کنه اسکرول کنه انیمیشن‌ها رو ببینه ,خلاصه یه شمای کلی از محصولش رو با تمام جزییات میتونه ببینه 

prototype

اقای قربان زاده افرین 

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

سعید نجات ۱۲ تیر ۱۳۹۹، ۰۸:۱۱

 

سلام سعید جان 
حتما به روی چشم 

والا چیزی ک من استفاده میکنم همین اموزشای استاد صالحیه 
و در کنارش برای خودم چالش‌های چند روزه در نظر میگیرم که اگر سرچ کنی توی گوگل به راحتی پیدا میشه
مثلا میتونی بزنی html css challenges یا اینکه codepen رو باز کنی و پروژه‌های راحت رو یا قسمتی از اون هارو به عناون تمرن برای خودت بزنی 
هرچند که به نظرم اگه ویدیویی باشه بهتره چون جایی به اشکال بخوری میتونی دوباره رجوع کنی 

یعنی بگرد دنبال ویدیوهای پروژه محور یا پروژه هایی که سورس کد هاشو داری و به عنوان تمرین خودت بزنی 

هیچی به اندازه ی تمرین باعث یادگیری نمیشه حین همین چالشا و تمرینا خیلی چیزا ملکه ی ذهنت میشه 

 

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

 

https://www.frontendmentor.io/challenges

 

https://100dayscss.com/ از بین این صد پروژه هر کدومو که راحتی سعی کن بزنی 

 

https://cssbattle.dev/

 

https://codier.io/

 

https://www.hackerrank.com/ فیلتره 

 

https://codepen.io/challenges/ قسمت css اش 

 

امیدوارم مفید باشه 

 

علی قربان زاده ۱۲ تیر ۱۳۹۹، ۰۸:۳۳