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

اما عامل سومی نیز در این میان وجود دارد- استفاده از HTML و CSS برای الگو طراحی و تکرار آن برای ساخت طراحی وب سایت نهایی.

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

نمونه سازی ها کامل و بی نقص

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

نقاط مثبت:

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

نقاط منفی

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

الگوسازی سریع طراحی وب سایت

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

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

نقاط مثبت:

• شما را به سرعت از مرحله تئوری وارد مرحله عملی می کند.
• این روش انعطاف پذیری بسیار بالایی را در مرحله عملی طراحی وب سایت باعث می شود، این در حالی است که در طول الگو سازی، راهنمایی ها و دستورالعمل هایی نیز در این میان وجود دارد.
• این روش به شما این امکان را می دهد تا طراحی سایت را درون مرورگرها ارتقاء دهید و عوامل تعاملی و افکت های جاوا اسکریپتی را به عنوان عوامل ایستاتیک در طراحی وب سایت اعمال کنید.
• زمانی که کار خود را با HTML و CSSشروع کنید، شما به ندرت توسط این روش به استفاده از موارد غیر ضروری در طراحی سایت خود روی می آورید.

نقاط منفی:

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

ساخت الگو در مرورگرها

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

نقاط مثبت:

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

نقاط منفی:

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

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