iHMahmoodi
Visual Designer

نمونه‌کار: رابط کاربری وبسایت و فروشگاه نیلیش

Nailish - Nail Polish and Nail care Website and PWA UI/UX

 

e8755f22d594b4466a0e6c17484198f7-3770397
نمونه‌کار: رابط کاربری وبسایت و فروشگاه نیلیش – صفحه اصلی – Nailish.ir

پروژه نمونه‌کار: رابط کاربری وبسایت و فروشگاه نیلیش هم شامل صفحات معرفی سرویس، وبلاگ و… و هم صفحات فروشگاه نیلیش بود که در چند فاز هم برای حالت دسکتاپ و هم بصورت PWA / موبایل طراحی شد.

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

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

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

در زیر تعدادی از صفحات اصلی و فروشگاهی این وبسایت را در دو حالت دسکتاپ و PWA / موبایل قرار داده شده است.

 

صفحات اصلی:

fe4394bc11d6274a9b76c23ca4c747f4-9854279
لوگو وبسایت نیلیش – Nailish.ir

 

5c6b4cf2a1b605a8f52ba733ebded9d6-3563147
1 – صفحه اصلی وبسایت نیلیش حالت موبایل – Nailish.ir

 

4988f5002372fbf900119b3c33e1eb59-1232421
2 – صفحه وبلاگ وبسایت نیلیش حالت دسکتاپ – Nailish.ir
صفحات اصلی وبلاگ و نمایش پست وبلاگ سرویس نیلیش به گونه ای طراحی شد که کارفرما بتواند محتوای تصویری یا متنی خود را که هدف اصلی سرویسش نیز بود را به خوبی و زیبایی به کاربر ارائه دهد.
همانطور که در تصاویر می بینید محتوای متنی و تصویری / ویدیویی براحتی در کنار یکدیگر قرار دارند و یکپارچگی صفحات نیز حفظ شده است.

 

45e31e2661d3f08728d3f69f8949a09a-2503479
3 – صفحه وبلاگ وبسایت نیلیش حالت موبایل – Nailish.ir

 

a7b99b376ceffc4940177565e965b034-3408654
4 – صفحه درباره ما وبسایت نیلیش حالت دسکتاپ – Nailish.ir

 

 

910e9261f8d41ee00fdc925c8ab695f9-3027213
5 – صفحه تماس با ما وبسایت نیلیش حالت دسکتاپ – Nailish.ir

 

صفحات فروشگاه

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

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

 

cedc7c0da35aa88cc7a36f45591b30b2-7545217
6 – صفحه اصلی و جستجوی فروشگاه نیلیش حالت دسکتاپ و موبایل – Nailish.ir

 

01da103cb75e38eb8c887e5b2a2608f0-4339425
7 – صفحه جزئیات محصول فروشگاه نیلیش حالت موبایل – Nailish.ir

 

7d120e5fe14010c3762e25e6c3c455f0-8019175
8 – صفحه جزئیات محصول فروشگاه نیلیش حالت دسکتاپ – Nailish.ir

 

همچنین می توانید نمونه کارهای بیشتر را در نمونه کارهای UI/UX ببینید.

برای ثبت سفارش به قسمت تماس با ما مراجعه کنید

 

رزومه / سوابق کاری من را در صفحه اصلی سایت مشاهده کنید.

 

رابط کاربری وبسایت و فروشگاه نیلیش را در Dribbble با کیفیت بالا ببینید.

 

 

مطالب مرتبط با طراحی رابط کاربری (UI/UX):

اصول طراحی رابط کاربری برای تلویزیون

طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ

طراحی رابط کاربری موبایل 101: pixels, points و resolutions

تفاوت pt و px در طراحی رابط کاربری

آموزش Adobe XD: معرفی 5 پلاگین فوق العاده کاربردی – قسمت اول

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب آموزش های ما را هر هفته در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.
عضویت
اطلاع از
guest
0 نظرات
Inline Feedbacks
نمایش همه‌ی نظرات