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

 

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

رابط کاربری ( UI/UX ) نیلیش چه ویژگی هایی دارد؟

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

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

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

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

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

 

صفحات اصلی:

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

 

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

 

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

 

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

 

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

 

 

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

 

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

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

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

 

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

 

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

 

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

 

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

[better-ads type=”banner” banner=”8708″ campaign=”none” count=”2″ columns=”1″ orderby=”rand” order=”ASC” align=”center” show-caption=”1″][/better-ads]

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

 

 

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

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

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

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

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

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

حسین محمودی
حسین محمودی

حسین محمودی هستم، طراح محصول و UI/UX، طراح گرافیکی، صفحه آراء.
تصمیم گرفتم مطالبی در زمینه های مختلفی که بهشون علاقه دارم رو در اینجا قرار بدم که از جمله میشه به طراحی رابط کاربری و تجربه کاربری (UI/UX)، طراحی گرافیک و صفحه آرایی اشاره کرد.

مقاله‌ها: 239

پاسخی بگذارید