اصطلاحات پایه ای در طراحی سایت

اصطلاحات رایج در طراحی سایت

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

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

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

فهرست زیر را بررسی کنید و ببینید چگونه می توانید از این واژه ها به درستی بهره ببرید.

HTML، CSS و جاوا اسکریپت:

خوب اجازه دهید فهرست مان را با چند واژه ساده که برای خیلی از طراحان سایت اشنا هستند اغاز کنیم. همانطور که می دانید HTML به معنای زبان نشانه گذاری ابرمتنی (HyperText Markup Language) است و HTML5 آخرین نسخه از این زبان برنامه نویسی محسوب می شود. در ادامه سعی می کنیم کمی بیشتر با این زبان اشنا شویم.

HTML:

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

زبان برنامه نویسی CSS:

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

زبان برنامه نویسی جاوا اسکریپت:

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

طراحی ریسپانسیو (واکنشگرا):

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

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

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

نشانه گذاری معنایی (Semantic markup):

نشانه گذاری معنایی درباره اختصاص متادیتاهای مرتبط به محتواست. Semantic markup رویکردی برای کدنویسی HTML است که در آن تگ های نشانه گذاری برای توصیف محتوا مورد استفاده قرار می گیرد و می تواند متادیتاهای مرتبط را درباره خود محتوا نیز فراهم آورد. اجازه دهید این موضوع را با یک مثال ساده توضیح دهیم. فرض کنید اطلاعاتی داریم که به محتوای اصلی صفحه مرتبط است اما به طور مستقیم جزو موضوع صفحه در نظر گرفته نمی شود. چنین اطلاعاتی را می توان به صورت <aside> نشانه گذاری کرد. اگرچه این موضوع به نظر ساده می رسد اما باید به خاطر داشته باشید که همیشه استفاده از چنین رویکردی ساده نخواهد بود.

روزهای نخست:

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

در همان زمان طراحان سایت به خصوصیات و ویژگی های بصری پیش فرض تگ های خاص برای تعریف کاری که آن ها انجام می دادند روی آوردند. در نتیجه چنین تغییراتی متن های بولد شده اغلب به جای رندر شدن به عنوان تگ <strong> یا <em> به صورت تگ های هدینگ رندر شدند.

نسل گم شده:

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

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

SaaS:

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

تست A/B:

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

ARIA:

1. 
   

واژه ARIA (Accessible Rich Internet Application) فناوری هایی را توصیف می کند که به ایجاد صفحات و در دسترس قرار دادن آن ها کمک می کنند. این واژه به ایده ای اطلاق می شود که در آن اپلیکیشن های وب توسط طیف وسیعی از افراد با نیازهای مختلف مورد استفاده قرار می گیرد.

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

معماری اطلاعات (Information Architecture):

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

اسکرپیت نویسی سمت سرور:

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

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

سلسله مراتب بصری:

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

اسکرول کردن پارالاکس/ نامحدود:

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

منبع: اصطلاحات پایه طراحی وب