عبور کردن از راه حل های قدیمی و سنتی الگوهای طراحی سایت


مقاله عبور کردن از راه حل های قدیمی و سنتی الگوهای طراحی سایت

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

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

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

 

الگو های طراحی وب سایت با پایداری پایین و ضعیف

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

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

 

الگوهای طراحی وب سایت با پایداری متوسط

این نوع الگو ها به عنوان MOCKUP ها یا نمونه ها مشهور می باشند که جزئیات بیشتر و بهتری نسبت به روش قبلی را در اختیارتان قرار می دهند و می توانند مستندات معتبرتری از رابط کاربری را به شما ارائه دهند. این نوع الگوها معمولا در کامپیوتر ها توسط ابزارهایی مانند BALSAMIQ MOCKUPS و یا AXURE و یا به صورت دستی توسط استنسیل، ساخته می شوند.

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

 

الگوهای طراحی وب سایت با پایداری بسیار بالا

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

اندازه ها، فضاهای خالی، حاشیه ها، تناسب ها و ارتفاع خط ها در این نوع الگوسازی طراحی وب سایت نیز مورد ملاحضه قرار می گیرد و معمولا توسط ابزارهایی مانند FIREWORKS، ILLUSTRATOR و OMNIGRAFFLE تولید و ساخته می شود. این موارد توسط یک طراح بصری انجام می پذیرد. این نوع کپی از رابط کاربری بسیار شبیه طراحی نهایی می باشد. در این روش، محتواهایی که برای کاربران جذاب می باشد (مانند نظرات و انتقادات مشتریان) ممکن است با متن های LOREM IPSUM پر شود و موقعیت مکانی تصاویر و ویدئوهایی که توسط کاربران سایت آپلود خواهد شد، در کادرهایی مشخص می شوند.

 

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

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

 

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

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

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

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

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

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

 

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

 

مضرات نمونه سازی طراحی سایت با الگوهایی با پایداری بالا

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

 

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

 

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

 

چرا الگوهای طراحی با پایداری بالا نمی توانند در زمان صرفه جویی کنند

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

 

الگوهای طراحی، ریسپانسیو نمی باشند: اگر می خواهید طراحی وب ریسپانسیویی را داشته باشید، باید حداقل دو الگو طراحی وب سایت را به منظور نمایان شدن هم در دسک تاپ و هم در گوشی های همراه به وجود بیاورید، حتی در برخی مواقع باید یک الگوی دیگر را برای تبلت ها نیز در نظر بگیرید. برای پروژه های که دارای ۱۰ نمای مختلف می باشند، شما ممکن است نیاز به ۲۰ یا ۳۰ الگو طراحی داشته باشید. یک صفحه HTML به تنهایی می تواند با تغییر اندازه خودکار خود، با هر صفحه نمایش و هر سیستم عاملی مطابقت یابد، از این رو دیگر نیازی نیست تا کار خود را تکرار نمایید.

 

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

آیا مواردی وجود دارد که بتوان به این روش انجام داد؟ البته، کلمات کلیدی.

 

تمرکز روی نمونه های طراحی سایت

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

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

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

 

الگو ها و یا طراحی وب سایت ها در مرورگرها

چرا نباید الگوها را مستقیم در HTML/CSS به وجود آورد؟ دلایل مختلفی برای جذاب رسیدن این مورد وجود دارد:

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

 

الگوهای طراحی سایت شما به صورت اتوماتیک، ریسپانسیو می باشند: هر دو قالب های برنامه نویسی (HTML & CSS) به صورت خودکار ریسپانسیو می باشند. حتی اگر شما از همان مرحله پیش طراحی، از CSS به کار ببرید، ریسپانسیو بودن سایت نسبت به ساخت الگوهای مجزا به منظور نمایش وب سایت در ابزارهای مختلف باعث می شود تا پروسه کاری تان بسیارآسان تر شده و می توانید سرعت بیشتری در این زمینه داشته باشید. به علاوه، می توانیم با همین روش، تست طراحی سایت در گوشی های همراه را نیز انجام دهیم.

 

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

 

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

 

ماهیت مقیاس پذیری در CSS باعث می شود تا اعمال تغییرات به سادگی صورت پذیرد: کل پروژه طراحی حتی می تواند از یک خط برنامه نویسی تاثیر بگیرد. استفاده از یک INSPECTOR مرورگر مانند FIREBUG می تواند باعث اعمال سریع تغییرات در حین اجرای وب سایت شود.

 

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

 

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

 

نتیجه گیری

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

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

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

مقاله

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *