آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

اصول طراحی سایت بانک ها و مراکز مالی و بررسی چند بانک معتبر کشور

سلام به همه همراهان عزیز ،

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

bank

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

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

از کدام سبک طراحی استفاده کنیم ؟

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

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

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

مسلما اولین ترکیب رنگی ، رنگ سازمانیِ مرکز مربوطه خواهد بود . به عنوان مثال رنگ سازمانی ایرانسل زرد و رنگ سازمانی بانک تجارت آبی و رنگ سازمانی بانک پاسارگاد زرد و همینطور رنگ سازمانی بانک سامان آبی فیروزه ای هست که حتما می بایست این رنگ ها رو به عنوان رنگ اصلی مراکز ذکر شده رعایت کرد . برخی از ترکیب های رنگی گاها در جامعه ما به یک الگو تبدیل شده اند مثلا از زمانی که ایرانسل بوجود اومده به واسطه موضوع فعالیتی که داشت ، از اون پس رنگ اصلی ارائه خدمات مخابراتی و خدمات پیامکی در سایت های مختلف مثل سایت های ارائه دهنده خدمات پیام کوتاه و … به رنگ زرد تبدیل شد و یا بسیاری از افرادی که در این زمینه فعالیت داشتند تمایل داشته که رنگ سایتشان همانند رنگ زرد ایرانسلی باشد که جای تعجب زیادی داشت !

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

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

اجزاء سایت را چگونه طراحی و جایگذاری کنیم ؟

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

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

بررسی مختصر وب سایت چند بانک ایرانی

بانک ملی ایران

  • سبک استفاده شده در طراحی سبک فلت هست البته نه به صورت کامل فلت و در بخش هایی ، طراح نتونسته یا نخواسته اصول فلت رو رعایت کنه و یا میخواسته طرح رو ایرانیزه کنه .
  • اسلایدر بسیار بزرگ ولی متاسفانه سبک طراحی تصاویر اسلایدر ارتباطی با سبک اصلی طراحی سایت که فلت هست نداره و کاملا فانتزی طراحی شده که این خودش مشکل بزرگی هست که سایت رو از یک دست بودن در میاره البته تصاویر جذابی طراحی شده .
  • استفاده نامناسب از آیکن های گرافیکی که به دلیل رنگارنگ بودن بیش از حد این آیکن ها جلوه جالبی رو بوجود نیاورده .
  • ارتفاع بیش از حد سایت که مخاطب رو وادار به اسکرول کردن میکنه .
  • استفاده از پترن که خلاف سبک فلت هست .
  • عدم رعایت رنگ سازمانی بانک ملی ( زرد ) و استفاده از رنگ های مختلف مثل نارنجی و آبی که ارتباطی با رنگ سازمانی بانک ملی نداره.
  • واضح نبودن گزینه هایی مثل مدیرتی حساب اینترنتی و …
  • و …

بانک صادرات ایران

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

بانک تجارت

  • استفاده از سبک کلین و رعایت حدودی اصول طراحی این سبک
  • ارتفاع کلی سایت بسیار مناسب وبدون نیاز به اسکرول کردن زیاد صفحه
  • رنگ های استفاده شده کاملا هماهنگ با رنگ سازمان برند بانک تجارت و لوگوی بانک همچنین استفاده از رنگ زرد نارنجی به عنوان رنگ مکمل
  • ابعاد و نوع طراحی تصاویر اسلایدر بسیار مناسب
  • منوی دسترسی سریع در کنار اسلایدر و همینطور محاسبه سود سپرده که شاید بیشتر استفاده را بین مشتریان بانک داشته باشه
  • استفاده از ۶ گزینه بسیار کاربردی در زیر اسلایدر کاملا واضح
  • تخصیص یک بخش مناسب و جذاب از لحاظ نوع طراحی برای دسترسی به بانک داری الکترونیک
  • چیدمان خدمات بانک به صورت تب مانند که دسترسی خوبی رو ایجاد کرده
  • مکانی برای نمایش دادن نرخ ارز های پولی مهم

بانک پاسارگاد

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

بانک سامان

  • سبک استفاده شده سبک فلت هست و کلیه اصول این سبک رعایت شده . این طرح ثابت کرده که طرح های سبک فلت صرفا لبه های تیز ندارند بر خلاف طرح سایت بانک صادرات !
  • ارتفاع کلی سایت بسیار مناسب و بدون نیازبه اسکرول کردن
  • رنگ بندی استفاده شده دقیقا مطابق با رنگ سازمانی بانک سامان
  • استفاده از فونت مناسب و زیبا و اندازه مناسب نوشته ها
  • تصاویر استفاده شده در اسلایدر کاملا با سبک طراحی کلی سایت هماهنگ هست
  • واضح بودن بخش بانک داری اینترنتی
  • واضح بودن زبان های دیگر سایت در حالی که از آیکن پرچم کشور ها هم استفاده نشده

بسیار خب ، طرح وب سایت ۵ بانک مطرح کشور رو به صورت مختصر و مفید بررسی کردیم . این بررسی صرفا دیدگاه بنده در مورد این وب سایت ها بود که خب شاید شما نظرات متفاوتی داشته باشید . ازتون درخواست میکنم اگر دیدگاه دیگری دارید حتما از بخش دیدگاه ها با ما در میان بگذارید . در زیر میتونید تصاویر مربوط به این ۵ بانک ایرانی رو ببینید ک

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : حسین همت یار

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مشاور گرافیک وب ، طراح UI و تحلیلگر UX، مسلط به نرم افزارهای گرافیکی پیکسلی و برداری و کدنویس HTML , CSS

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • هادی ارغان

    خوب بود نکات مثبت بانک های خارجی هم میگفتین مثلا بانک فلان چه نکات مثبتی داره که ما رعایت نکردیم یا ندارم

    • حسین همت یار

      سلام ، ممنون از دیدگاهتون . نکات مثبت و منفی بانک های ایرانی گفته شد پس براساس همون نکات مسلما میتونیم نگاه درست و دقیقی پیدا کنیم . تشکر

  • فرید

    بانک ملت رو فراموش کردین
    بانک تجارت کلین هست!!!!؟ ضمن اینکه انقدر شلوغ هست که کاربر نمیدونه به کجا نگاه کنه و اصلا یادش میره دنبال چی بود ! من تا به الان فکر میکردم کلین یعنی استفاده از یه آبجکت و دیگه هیچی ! اگر هم بخواد منو بگذاره فقط لینک ها رو قرار میده و سعی میکنه تامیشه از اضافات جلوگیری کنه. این هیچ جاش به کلین نمیخوره. بعد بانک سامان فلت هست، کلین نیست !

    • حسین همت یار

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

  • سیدعباس مرتضوی

    سلام و خسته نباشید بسیار اموزنده بود این مطلب.

  • قیمت سکه

    سلام
    مقاله جالبی بود ….اطلاعات خوبی بهم داد.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟