ایده برای طراحی رابط کاربری سایت از ۲ منبع برتر

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

توی این مقاله، اول فرق UI و UX رو خیلی ساده مرور می‌کنیم. بعد می‌بینید برای هر بخش سایت چه عبارتی جست‌وجو کنید، نمونه‌ها رو چطور بسنجید و چطور بدون کپی‌کردن به یک طرح اختصاصی برسید. در آخر هم ایده‌ها رو قدم‌به‌قدم به یک طرح اولیه تبدیل می‌کنیم.

قبل از پیدا کردن ایده، فرق UI و UX رو ساده بشناسید

وقتی نمونه‌های طراحی رو می‌بینید، فقط به زیبایی صفحه نگاه نکنید. یک صفحه خوب باید هم ظاهر واضح و جذابی داشته باشه و هم کاربر رو بدون سردرگمی به هدفش برسونه. اینجا دو مفهوم UI و UX وارد ماجرا می‌شن. برای توضیح کامل‌تر می‌تونید مقاله تفاوت UI و UX رو بخونید.

رابط کاربری یا UI یعنی چی؟

UI کوتاه‌شده User Interface و به معنی رابط کاربریه؛ یعنی همه چیزهایی که کاربر روی صفحه می‌بینه و باهاشون کار می‌کنه. رنگ‌ها، فونت‌ها، دکمه‌ها، منو، فرم‌ها، کارت محصولات، آیکون‌ها و فاصله بین بخش‌ها همگی جزو UI هستن.

مثلاً رنگ و اندازه دکمه «افزودن به سبد خرید» به رابط کاربری مربوطه. اگه این دکمه بین اجزای صفحه گم بشه یا نوشته‌اش خوانا نباشه، ظاهر صفحه به انجام کار اصلی کمک نمی‌کنه. در راهنمای رابط کاربری یا UI چیست می‌تونید با جزئیات بیشتری از این مفهوم آشنا بشید.

تجربه کاربری یا UX یعنی چی؟

UX کوتاه‌شده User Experience و به معنی تجربه کاربریه؛ یعنی کاربر موقع کار با سایت چه حسی داره و چقدر راحت به هدفش می‌رسه. پیداکردن سریع محصول، ساده‌بودن ثبت سفارش و مشخص‌بودن مرحله بعدی، همگی به UX مربوط می‌شن.

ممکنه یک صفحه خیلی زیبا باشه، ولی کاربر نتونه دکمه خرید رو پیدا کنه. در این حالت UI جذابه، اما UX خوبی نداریم. پس وقتی ایده می‌گیرید، در کنار ظاهر صفحه، مسیر حرکت کاربر رو هم بررسی کنید.

چرا طراح سایت وردپرس هم به UI و UX نیاز داره؟

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

اگه اصول ساده UI و UX رو بدونید، مجبور نیستید دموی یک قالب رو بدون تغییر استفاده کنید. می‌تونید اجزای آماده رو بر اساس نیاز مخاطبتون بچینید و سایت منظم‌تری بسازید. اگه تازه شروع کردید، می‌تونید از دوره رایگان طراحی سایت میهن وردپرس کمک بگیرید.

قبل از جست‌وجو مشخص کنید برای کدوم بخش سایت ایده می‌خواید

اگه فقط عبارت کلی «طراحی سایت» رو جست‌وجو کنید، با کلی نتیجه نامرتبط روبه‌رو می‌شید. بهتره اول نوع سایت و بخشی رو که می‌خواید طراحی کنید مشخص کنید. مثلاً به‌جای «فروشگاه زیبا»، دنبال نمونه صفحه محصول یک فروشگاه پوشاک در موبایل بگردید.

• صفحه اصلی و بخش معرفی اولیه: برای پیداکردن چیدمان مناسب تیتر اصلی، توضیح کوتاه، تصویر و دکمه اقدام.
• منو و مسیرهای دسترسی: برای دیدن مدل‌های مختلف هدر، منوی موبایل، جست‌وجو و دسته‌بندی‌ها.
• صفحه محصول یا خدمات: برای چیدن تصویر، قیمت، ویژگی‌ها، نظر کاربران و دکمه خرید یا تماس.
• صفحه نوشته و وبلاگ: برای بهترکردن خوانایی متن، فهرست مطالب، تصاویر و مطالب پیشنهادی.
• فرم ثبت‌نام، ورود یا تماس: برای ساده‌کردن فیلدها، پیام‌های راهنما و دکمه ارسال.
• نسخه موبایل سایت: برای بررسی اندازه دکمه‌ها، ترتیب محتوا و منوی مناسب صفحه کوچک.

هدف صفحه رو هم کنار نوع اون بنویسید. مثلاً هدف صفحه اصلی می‌تونه معرفی خدمات و فرستادن کاربر به فرم مشاوره باشه. همین جمله کوتاه کمک می‌کنه نمونه‌های زیبا ولی نامناسب رو زودتر کنار بذارید.

دو منبع برتر برای ایده طراحی رابط کاربری سایت

Pinterest و Dribbble هر دو برای پیداکردن ایده مفید هستن، ولی دقیقاً یک کار رو انجام نمی‌دن. Pinterest برای جست‌وجوی گسترده و دسته‌بندی تصاویر مناسبه. Dribbble هم بیشتر به شما کمک می‌کنه نمونه‌کار طراحان و جزئیات بصری رابط‌ها رو ببینید.

Pinterest؛ برای جست‌وجو و دسته‌بندی ایده‌های بصری

Pinterest یک پلتفرم کشف بصریه؛ یعنی موضوعی رو جست‌وجو می‌کنید و تصاویر و ایده‌های مرتبط با اون رو می‌بینید. هر تصویر ذخیره‌شده Pin نام داره و مجموعه‌ای که Pinها رو داخل اون می‌ذارید Board یا برد نامیده می‌شه.

چطور نمونه‌های مرتبط با نوع سایتتون رو پیدا کنید؟

عبارت جست‌وجوتون رو از سه بخش بسازید: نوع سایت، بخش صفحه و سبک دلخواه. مثلاً برای صفحه اصلی یک فروشگاه مینیمال، عبارت minimal ecommerce homepage design رو جست‌وجو کنید. عبارت‌های انگلیسی رو هم امتحان کنید تا نمونه‌های متفاوتی ببینید. جست‌وجوی فارسی هم برای دیدن طرح‌های نزدیک‌تر به زبان و بازار ایران به کارتون میاد.

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

چطور ایده‌ها رو در بردهای جدا ذخیره کنید؟

برای هر پروژه یک برد بسازید و ایده‌های مربوط به هدر، صفحه محصول، فرم‌ها، رنگ و تایپوگرافی رو جدا نگه دارید. تایپوگرافی یعنی انتخاب و شیوه نمایش نوشته‌ها؛ مثل نوع فونت، اندازه تیتر و فاصله بین خط‌ها.

برای برد هم یک اسم دقیق انتخاب کنید؛ مثلاً «فروشگاه پوشاک ـ صفحه محصول». اگه همه ایده‌ها رو داخل یک برد عمومی بریزید، موقع طراحی دوباره باید زمان زیادی برای پیداکردن نمونه مناسب بذارید.

چه عبارت‌هایی رو برای رسیدن به نتیجه بهتر جست‌وجو کنید؟

از کلمه‌های مشخصی مثل homepage، landing page، product page، mobile UI و checkout استفاده کنید. بعد نوع کسب‌وکار یا سبک رو به اون‌ها اضافه کنید؛ مثل SaaS landing page یا clean blog layout. عبارت کلی website design معمولاً نتیجه‌های پراکنده‌تری نشون می‌ده.

Dribbble؛ برای دیدن نمونه‌کار طراحان رابط کاربری

Dribbble فضایی برای نمایش نمونه‌کارهای طراحی و پیداکردن طراح‌هاست. توی این سایت می‌تونید نمونه رابط سایت، اپلیکیشن، داشبورد، صفحه فرود و اجزایی مثل فرم و دکمه رو ببینید. Dribbble یک بخش Marketplace هم برای منابع و خدمات طراحی داره.

چطور طرح‌های مرتبط با صفحه موردنظرتون رو پیدا کنید؟

نام دقیق صفحه رو همراه با حوزه کسب‌وکار جست‌وجو کنید. عبارت‌هایی مثل restaurant booking page، finance dashboard یا online course landing page از عبارت کلی web design نتیجه‌های دقیق‌تری می‌دن.

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

چطور جزئیات هر طرح رو بررسی کنید؟

طرح رو در اندازه بزرگ ببینید و ترتیب بخش‌ها رو بررسی کنید. ببینید چشمتون اول به کجا می‌ره، دکمه اصلی چقدر مشخصه، نوشته‌ها چطور دسته‌بندی شدن و فاصله اجزا چقدره. اگه فقط یک تصویر کوچک از صفحه می‌بینید، درباره کارکرد کامل اون زود نتیجه‌گیری نکنید.

توضیح طراح و نمونه‌های مرتبط با همون پروژه رو هم بخونید. گاهی یک طراح چند صفحه از یک محصول رو جداگانه منتشر کرده و دیدن کل مجموعه، مسیر کاربر رو بهتر نشون می‌ده.

چطور از Marketplace و پروفایل طراحان استفاده کنید؟

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

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

عبارت‌های پیشنهادی برای جست‌وجوی ایده در Pinterest و Dribbble

برای شروع می‌تونید عبارت‌های زیر رو جست‌وجو کنید. بهتره نام حوزه کاری یا سبک دلخواهتون رو هم به آخر هر عبارت اضافه کنید.

• ایده برای صفحه اصلی سایت:website homepage inspiration یا modern homepage UI
• ایده برای سایت فروشگاهی:ecommerce website UI یا product page design
• ایده برای صفحه فرود:landing page inspiration یا SaaS landing page UI
• ایده برای داشبورد کاربری:user dashboard UI یا admin dashboard design
• ایده برای طراحی نسخه موبایل:mobile website UI یا responsive web design inspiration
• ایده برای فرم‌ها و دکمه‌ها:signup form UI، contact form design یا CTA button design

CTA کوتاه‌شده Call to Action هست و به دکمه یا بخشی گفته می‌شه که از کاربر می‌خواد یک کار مشخص انجام بده؛ مثل «خرید محصول»، «ثبت‌نام» یا «دریافت مشاوره».

چطور از نمونه‌ها ایده بگیرید بدون اینکه کپی کنید؟

ایده‌گرفتن یعنی بفهمید چرا یک طرح خوب کار می‌کنه و همون منطق رو برای مسئله خودتون به کار ببرید. کپی‌کردن یعنی ظاهر، متن، تصاویر و چیدمان یک نمونه رو تقریباً همون‌طور تکرار کنید. مسیر زیر کمکتون می‌کنه از نمونه‌ها یاد بگیرید و در نهایت به طرح خودتون برسید.

1. چند نمونه مناسب رو کنار هم جمع کنید. خودتون رو به یک طرح محدود نکنید. برای هر بخش چند نمونه مرتبط نگه دارید تا بتونید انتخاب‌ها رو با هم مقایسه کنید.
2. نیاز کاربر و هدف صفحه رو مشخص کنید. بنویسید کاربر کیه، دنبال چیه و بعد از دیدن صفحه باید چه کاری انجام بده.
3. بخش‌های کاربردی هر نمونه رو جدا کنید. شاید ساختار تیتر از یک نمونه، مدل نمایش ویژگی‌ها از نمونه دوم و چیدمان فرم از نمونه سوم برای پروژه‌تون مناسب باشه.
4. رنگ، فونت و چیدمان رو با هویت برند خودتون هماهنگ کنید. هویت برند یعنی ظاهر و حسی که باعث می‌شه مخاطب کسب‌وکارتون رو بشناسه. رنگ و فونت یک نمونه نباید بدون دلیل وارد پروژه شما بشه؛ خوانایی و هماهنگی رو در اولویت بذارید.
5. طرح نهایی رو روی موبایل و دسکتاپ بررسی کنید. چیدمانی که روی نمایشگر بزرگ خوب به نظر می‌رسه، شاید در موبایل طولانی یا شلوغ بشه.

برای ایده‌های بیشتر می‌تونید راهنمای چطور ایده برای طراحی سایت پیدا کنیم رو هم ببینید. مقایسه نمونه‌ها مفیده، ولی تصمیم آخر باید بر اساس مخاطب و هدف پروژه خودتون گرفته بشه.

هنگام بررسی یک رابط کاربری به چه چیزهایی دقت کنید؟

هر نمونه‌ای که می‌بینید، این چند مورد رو مثل یک چک‌لیست ساده بررسی کنید:

• سادگی مسیر رسیدن کاربر به هدف: کاربر باید بدونه قدم بعدی چیه و برای انجام کار اصلی بین چند مسیر سردرگم نشه.
• خوانایی متن‌ها و دکمه‌ها: اندازه نوشته، تفاوت رنگ متن با پس‌زمینه و عبارت روی دکمه باید واضح باشه.
• فاصله‌گذاری و نظم بخش‌ها: اجزای مرتبط بهتره نزدیک هم باشن و بخش‌های جدا با فاصله مشخص نمایش داده بشن.
• هماهنگی رنگ‌ها و فونت‌ها: تعداد زیاد رنگ و فونت صفحه رو شلوغ می‌کنه و تشخیص بخش‌های مهم رو سخت‌تر می‌کنه.
• نمایش درست در موبایل: متن‌ها، دکمه‌ها، فرم‌ها و تصاویر باید روی صفحه کوچک هم راحت دیده و لمس بشن.
• سرعت و سبک‌بودن صفحه: تصویرهای سنگین، ویدئوهای خودکار و جلوه‌های زیاد می‌تونن سرعت صفحه رو کم کنن. مقاله تأثیر سرعت سایت در سئو اهمیت این موضوع رو بیشتر توضیح می‌ده.
• دسترسی‌پذیری برای کاربران مختلف: برای تصاویر متن جایگزین بذارید، امکان کار با صفحه‌کلید رو در نظر بگیرید، فیلدهای فرم رو واضح نام‌گذاری کنید و رنگ‌هایی انتخاب کنید که متن از پس‌زمینه قابل‌تشخیص باشه.

اشتباه‌های رایج موقع ایده گرفتن برای طراحی سایت

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

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

سلیقه شخصی شما هم همیشه با نیاز واقعی مخاطب یکی نیست. شاید خودتون یک چیدمان خاص یا ترکیب رنگ متفاوت رو دوست داشته باشید، ولی کاربر برای پیداکردن جواب سؤالش به مسیر ساده‌تری نیاز داشته باشه. پس قبل از انتخاب هر ایده، مشخص کنید مخاطب چرا وارد صفحه می‌شه، چه کاری داره و کدوم اطلاعات رو باید زودتر ببینه.

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

نسخه موبایل رو هم به آخر پروژه موکول نکنید. چیدمانی که روی مانیتور مرتب و جذابه، شاید روی صفحه کوچک خیلی طولانی یا شلوغ بشه. بهتره از همون طرح اولیه، ترتیب نمایش بخش‌ها، اندازه نوشته‌ها و دکمه‌ها و فضای لازم برای لمس راحت اجزا رو در موبایل مشخص کنید.

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

از ایده تا طرح اولیه سایت چه مراحلی رو طی کنید؟

1. هدف صفحه رو در یک جمله بنویسید. مثلاً «کاربر باید خدمات رو بشناسه و برای مشاوره فرم رو پر کنه.» این جمله معیار تصمیم‌های بعدی شماست.
2. نمونه‌های مناسب رو ذخیره و دسته‌بندی کنید. کنار هر نمونه بنویسید دقیقاً کدوم بخشش مفیده. ذخیره یک تصویر بدون توضیح، بعداً کمک زیادی به تصمیم‌گیری نمی‌کنه.
3. وایرفریم یا طرح ساده صفحه رو بسازید. وایرفریم یک نقشه ساده و معمولاً بی‌رنگ از جای تیتر، تصویر، دکمه و بخش‌های صفحه‌ست. اینجا روی ساختار تمرکز کنید، نه جزئیات ظاهری.
4. رنگ، فونت و اجزای رابط کاربری رو انتخاب کنید. چند رنگ اصلی، اندازه تیترها و شکل دکمه‌ها رو مشخص کنید تا صفحه‌ها هماهنگ بمونن.
5. طرح رو در Figma یا ابزار دلخواهتون کامل کنید.Figma یک ابزار طراحی رابط و نمونه اولیه‌ست که باهاش می‌تونید صفحه‌ها رو قبل از پیاده‌سازی طراحی کنید. راهنمای فیگما چیست هم برای شروع کار با این ابزار کمکتون می‌کنه.
6. قبل از اجرا، مسیر کاربر رو دوباره آزمایش کنید. از یک نفر بخواید بدون توضیح شما کار اصلی صفحه رو انجام بده. جاهایی که مکث می‌کنه یا مسیر رو اشتباه می‌ره، نشون می‌دن کدوم بخش‌ها به اصلاح نیاز دارن.

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

جمع‌بندی

برای پیداکردن ایده‌های متنوع و ساخت مجموعه‌های موضوعی، می‌تونید از Pinterest شروع کنید. اگه می‌خواید جزئیات بصری نمونه‌کار طراحان، سبک‌های مختلف رابط کاربری یا پروفایل متخصص‌ها رو بررسی کنید، سراغ Dribbble برید. استفاده از هر دو منبع هم می‌تونه دید گسترده‌تری بهتون بده.

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

سؤال‌های پرتکرار درباره ایده برای طراحی رابط کاربری سایت

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.