من به عنوان مشتری طراحی وب چه چیزهایی را باید بدانم؟

منتشرشده: سپتامبر 30, 2011 در برنامه نویسی و توسعه وب
برچسب‌ها:, , ,

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

– تفاوت طراحی وب با توسعه وب
– استانداردهای وب
– الگوها و نمونه های طراحی وب
– طراحی صفحه اصلی و صفحات داخلی
– سرس PSD و یا سرس گرافیکی اثر
– کد خوانا، معنایی و قابل درک
– طراحی و استایل عناصر فرم
– قیمت و هزینه طراحی

تفاوت طراحی وب با توسعه وب

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

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

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

استانداردهای وب

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

  • تفاوت عمده نسخه های HTML (مثل نسخه 5 و 4)

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

  • تفاوت HTML و xHTML

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

  • تفاوت بنیادی مرورگرها در نمایش صفحات طراحی شده 

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

  • تفاوت سایر مرورگرها با مرورگر اینترنت اکسپلورر (خصوصا نسخه 6 و 7)

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

  • تفاوت در طراحی تمام صفحه و سایز ثابت

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

  • طراحی برای وسایل مختلف از جمله کامپیوترهای دسکتاپ یا وسایل قابل حمل مثل تبلت ها و گوشی موبایل

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

  • نحوه رفتار موتورهای جستجو با صفحات وب

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

الگوها و نمونه های طراحی وب

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

طراحی صفحه اصلی و صفحات داخلی

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

سرس PSD و یا سرس گرافیکی اثر

اگر شما قصد دارین که یک طرح اختصاصی و ویژه و فارغ از کپی کاری های مرسوم داشته باشید، نیازمند سرس PSD نیز خواهید بود. تقریبا این روزها صد در صد امور اولیه طراحی وب در نرم افزار فوتوشاپ انجام می شه و خروجی اون تحویل کدنویس وب که بهش Front-end Engineer  هم می گن داده می شه. پس لازم هست توجه کنید که طرح یکبار در فوتوشاپ زده میشه و خروجی اون در اختیار کد نویس قرار داده میشه. شاخصه مرحله اول فرایند خلاقه و زیبایی شناختیش هست و شاخصه مرحله دوم مهارت توسعه دهنده در تبدیل گرافیک به کد قابل دید در مرورگرها ( PSD to HTML) هست. بنابراین این دو مطلب در تعیین هزینه نهایی موثر هستند و شما به عنوان مشتری نباید کوته نگر باشید. همین قدر کافیه که بگم بهای طراحی وب اون ور آب و در کشورهای پیشرفته بالای 500 دلار و عمدتا روی 1000 دلار هست. پس برای هر طرحی توقع هزینه 50 الی 100 هزار تومنی نداشته باشید.

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

کد خوانا، معنایی و قابل درک

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

طراحی و استایل عناصر فرم

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

قیمت و هزینه طراحی

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

  • طراحی اولیه در فوتوشاپ
  • مقدار خلاقیت به کار رفته در امر طراحی
  • تجربه و سابقه طراح وب
  • نیازمندی به طراحی سرس PSD به HTML
  • پیاده سازی عناصرخاص و بهره گیری از جلوه های مدرن به مدد کتابخانه های جاوا اسکریپتی همچون jQuery 
  • ایجاد سازگاری با نسخه های قدیمی مرورگر اینترنت اکسپلورر
  • پیاده سازی ساختار قالب به صورت شناور یا ثابت
  • تهیه نسخه سازگار با موبایل
  • تبدیل سرس PSD به HTML یا تبدیل آن به پوسته مخصوص CMS هایی همچون وردپرس یا جوملا
  • تعداد صفحات مورد نیاز جهت طراحی
  • استفاده از فونت های خاص در طراحی و نمایش صحیح اونها
  • بهینه سازی مازاد برای افزایش سرعت لود سایت
  • پشتیبانی بعد از طراحی و تحویل
Advertisements
دیدگاه‌ها
  1. حامد می‌گوید:

    مباحث فنی همه جا در دسترس هستند ولی متاسفانه تجربیات طراحان وب معمولا کمتر در دسترس قرار میگیرند.از لطفی که کردید خیلی ممنون.
    واقعاً مفید بود.

  2. علی یزدی می‌گوید:

    سلام ممنون خیلی جالب و البته آموزنده بود. حتماً تو شبکه های مجازی اشتارکش می گذارم دوست من …

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

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s