طراح رابط کاربری/ تجربه کاربری ( UI / UX ) - مُدَرس - یوتیوبر
نمونهکار: رابط کاربری اپلیکیشن هواشناسی XWeather
این طرح کانسپت یا مفهومی را من با تحقیقات بسیار طراحی کردم. در ابتدا اپ های مشابه هواشناسی رو مشاهده کردم و نقات قوت هر کدام رو در نظر گرفتم. از طرفی قصدم در طراحی رابط کاربری این اپلیکیشن این بود که نمایی از مهمترین و زیباترین قسمت های هر شهری که کاربر آن را انتخاب میکند به نمایش بگذارد و اطلاعات را بصورت مینیمال روی تصویر نشان دهد. در تصویر زیر و در واقع در دید اول کاربر مهمترین اطلاعات هواشناسی رو دریافت میکنه که شامل دما، دمای واقعی، پیش بینی باران و سرعت باد می باشد. در صورتی که کاربر اطلاعات بیشتر و جزییات بیشتری نیاز داشت با کشیدن صفحه به بالا این اطلاعات به نمایش در می آید.
در صورتی که به این طرح اپلیکیشن نیاز دارید و می خواهید آن را برای محصولات خود گسترش بدهید و یا آن را در اپلیکیشن خود استفاده کنید، می توانید از طریق ایمیل با من در ارتباط باشید تا این طرح اولیه را بر اساس محصولات شما طراحی و گسترش بدهیم و یا اینکه لایسنس آن را خریداری کنید.
اکثر این کارها رو میتونید در وبلاگم، Dribbble و نسخه با کیفیت اونا رو در Behance ببینید.
همچنین برای سفارش کار میتونید به ایمیل iHMahmoodi [@] gmail.com با من در ارتباط باشید.
در زیر لوگو، صفحات مختلف این اپلیکیشن را به دو زبان انگلیسی و فارسی مشاهده می کنید.
توجه کنید که هرگونه دخل و تصرف در این نمونه کارها (یا کار هر طراح دیگری) و استفاده از اون در محصولی بدون خریداری لایسنس آن و یا کسب اجازه از طراح آن پیگرد قانونی دارد.
این مطلب برای اولین بار در وبلاگ اصلی من منتشر شده است.
من را در شبکه های اجتماعی دنبال کنید تا در جریان مطالب مرتبط با این موضوع (آموزشی، اخبار و…) و همچنین مطالب مفید دیگری قرار بگیرید.
Twitter: https://twitter.com/iHMahmoodi
Instagram: https://www.instagram.com/iHMahmoodi
blog: http://blog.iHMahmoodi.ir
Linkedin: https://www.linkedin.com/in/iHMahmoodi
Dribbble: https://dribbble.com/iHMahmoodi
Behance: https://www.behance.net/iHMahmoodi
Instagram – work: https://www.instagram.com/AsteriXarts
برای دیدن فیلم کوتاه از نحوه کارکرد اپلیکیشن هواشناسی XWeather به این آدرس مراجعه کنید.
با نظراتتون من رو در طراحی کارهای بهتر یاری بدید :)
مطلبی دیگر از این انتشارات
طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ
مطلبی دیگر از این انتشارات
نمونه کار صفحهآرایی - نشریه مهستان
مطلبی دیگر از این انتشارات
آموزش جامع Figma – کار با پنل Design در فیگما –قسمت دوم