زمان مطالعه: 8 دقیقه
در این مقاله از آکادمی کسب و کار پاکراه به اصطلاحات رایج در طراحی سایت به همراه دسته بندی های مشخص شده، معادل فارسی، انگلیسی و توضیحاتی درباره هر کدام خواهیم پرداخت.
اصطلاحات رایج در ساختار و اجزای اصلی وبسایت
| لغات و اصطلاحات | توضیحات |
| دامنه (Domain) | همانند یک آدرس منحصر به فرد برای یک خانه است. هر وبسایت یک دامنه دارد که به کاربران امکان می‌دهد تا آن را در مرورگر خود تایپ کرده و به سایت دسترسی پیدا کنند. |
| هاست (Host) | به فضایی که در اینترنت باید خریداری کنید تا میزبان کاربران اینترنتی خود باشید هاست گفته می شود. |
| سرور (Server) | کامپیوتر قدرتمندی است که هاست‌ها روی آن قرار دارند. سرورها به درخواست‌های کاربران پاسخ می‌دهند و صفحات وب را برای آن‌ها ارسال می‌کنند. |
| لینک (Link) | به پیوندی بین دو صفحه وب که آن دو را به یکدیگر متصل می کند لینک می گویند. |
| دایرکتوری (Directory) | به سایت هایی که با هدف جمع آوری سایت های دیگر در دسته بندی های گوناگون تولید شده اند دایرکتوری گفته می شود. |
| UI رابط کاربری (مخفف کلمه User interface) | به معنای واسط کاربری می‌باشد. یعنی ارتباط فیزیکی کاربر با کامپیوتر. |
| کاربر پسند (User Friendly) | یعنی کاربر وب سایت به راحتی بتواند با ابزارها و امکانات درون سایت کار کند و دچار شلوغی و سردرگمی نشود! |
| پروتکل (Protocol) | مجموعه‌ای از قوانین و استانداردهایی است که برای ارتباط بین کامپیوترها استفاده می‌شود. پروتکل HTTP یکی از مهم‌ترین پروتکل‌ها در وب است. |
| URL (Uniform Resource Locator) | آدرس کامل یک صفحه وب است که شامل پروتکل، نام دامنه، مسیر و نام فایل می‌شود. |
| IP Address | آدرس عددی منحصر به فرد هر دستگاه متصل به اینترنت است. |
| DNS (Domain Name System) | سیستمی است که آدرس‌های عددی IP را به نام‌های دامنه قابل فهم برای انسان تبدیل می‌کند. |
| صفحه اصلی (Homepage) | اولین صفحه‌ای که کاربر هنگام ورود به وبسایت مشاهده می‌کند. |
| صفحه داخلی (Inner Page) | صفحاتی که جزئیات بیشتری از یک موضوع خاص را ارائه می‌دهند. |
| صفحه فرود (Landing Page) | صفحه‌ای که برای تبدیل بازدیدکنندگان به مشتری طراحی شده است. |
| سربرگ (Header) | محتوای اولیه سایت شامل لوگوها و منوها را تشکیل می‌دهد. |
| ابزارک (Widget) | ابزارک یا sidebar که ستون‌های کناری سایت را تشکیل می‌دهند. |
| منوی ناوبری (Navigation Menu) | فهرست راهبری منوی اصلی و احتمالا دارای Sub Menu را در سایت تشکیل می‌دهد. |
| محتوا (Content) | محتوای اصلی را در سایت مشخص می‌کند که شامل متن و تصویر و ویدیو و… است. |
| صفحه بندی (Pagination) | عمل شماره بندی در صفحات انجام می‌دهد. |
| پانوشت (Footer) | در پایین‌ترین قسمت سایت قرار می‌گیرد و شامل کپی رایت و آیکون‌های شبکه اجتماعی و اطلاعات تماس است. |
| سایت مپ (Sitemap) | نقشه کاملی از تمام صفحات وبسایت است که به موتورهای جستجو کمک می‌کند تا تمام صفحات را پیدا کنند. |
| فوتر (Footer) | قسمت پایینی هر صفحه از وبسایت است که معمولاً شامل اطلاعات تماس، لینک‌های مهم و حق چاپ می‌شود. |
| HTML (HyperText Markup Language) | زبانی برای ساخت ساختار صفحات وب. |
| CSS (Cascading Style Sheets) | زبانی برای طراحی ظاهر و سبک صفحات وب. |
| Framework | چارچوبی که شامل مجموعه‌ای از ابزارها و کتابخانه‌ها برای توسعه سریع‌تر وبسایتها است. |
| Library | مجموعه‌ای از کدهای از پیش نوشته شده که می‌توان از آن‌ها در پروژه‌های مختلف استفاده کرد. |
| Debugging | فرایند پیدا کردن و رفع خطاهای در کد. |
| Version Control | سیستمی برای مدیریت تغییرات در کد منبع، مانند Git. |
| CMS (Content Management System) | سیستم مدیریت محتوا، نرم‌افزاری است که برای مدیریت و انتشار محتوا در وبسایت استفاده می‌شود. مثل وردپرس |
| DOM (Document Object Model) | ساختار سلسله‌مراتبی که عناصر HTML را به عنوان اشیاء نمایش می‌دهد و به جاوا اسکریپت اجازه می‌دهد تا با آن‌ها تعامل داشته باشد. |
| Bootstrap | یک فریمورک CSS محبوب برای ساخت وبسایتهای پاسخگو. |
| Front-end | بخش قابل مشاهده یک وبسایت که کاربران با آن تعامل دارند. |
| Back-end | بخش نامرئی یک وبسایت که منطق و پردازش داده‌ها را مدیریت می‌کند. |
| API (Application Programming Interface) | رابط برنامه‌نویسی کاربردی که به برنامه‌ها اجازه می‌دهد تا با یکدیگر ارتباط برقرار کنند. |
| Database | پایگاه داده‌ای که برای ذخیره اطلاعات استفاده می‌شود. |
اصطلاحات مربوط به عناصر بصری طراحی وبسایت
| لغات و اصطلاحات | توضیحات |
| لوگو (Logo) | نماد بصری یک برند یا شرکت است که هویت بصری وبسایت را مشخص می‌کند. |
| تایپوگرافی (Typography) | انتخاب و استفاده از فونت‌ها و اندازه‌های مختلف متن در طراحی وبسایت. |
| رنگ (Color) | استفاده از رنگ‌ها برای ایجاد هویت بصری و انتقال احساسات مختلف. |
| رنگ‌شناسی (Color Theory) | مطالعه علمی رنگ‌ها و تأثیر آن‌ها بر احساسات و رفتار انسان. در طراحی وب، انتخاب رنگ‌های مناسب برای انتقال پیام و ایجاد هویت بصری بسیار اهمیت دارد. |
| تصویر (Image) | تصاویر می‌توانند به جذابیت وبسایت اضافه کرده و مفاهیم را بهتر منتقل کنند. |
| گرافیک (Graphic) | عناصر گرافیکی می‌توانند برای ایجاد جلوه‌های بصری خاص استفاده شوند. |
| فضای منفی (Negative Space) | فضای خالی اطراف عناصر طراحی که به آن‌ها اجازه می‌دهد تنفس کنند و دیده شوند. |
| گرید سیستم (Grid System) | ساختاری است که برای سازماندهی عناصر طراحی در یک صفحه استفاده می‌شود و به ایجاد نظم و تعادل کمک می‌کند. |
| آیکون (Icon) | نمادهای گرافیکی ساده‌ای که برای نمایش مفاهیم پیچیده استفاده می‌شوند. |
| تصویرسازی (Illustration) | ایجاد تصاویر سفارشی برای انتقال مفاهیم خاص و ایجاد ارتباط بهتر با مخاطب. |
| انیمیشن (Animation) | ایجاد حرکت و پویایی در عناصر طراحی برای جلب توجه و ایجاد تعامل. |
| میکرو انیمیشن (Microinteraction) | انیمیشن‌های کوچکی که به تعاملات کاربر با عناصر رابط کاربری پاسخ می‌دهند. |
| آیکون‌های شبکه‌های اجتماعی (Social icons) | آیکون‌های مربوط به شبکه‌های اجتماعی (یاهو، گوگل پلاس، فیس‌بوک، توییتر و…) که در سایت هستند. |
| جداکننده (Separator) | به عنصری گرافیکی گفته می‌شود که برای جدا کردن بخش‌های مختلف یک صفحه و ایجاد ساختار بصری به کار می‌رود. این عنصر می‌تواند به صورت یک خط، یک نوار رنگی، یک شکل هندسی یا هر عنصر بصری دیگری باشد که به عنوان یک مرز بین بخش‌های مختلف عمل کند. |
| گلوله (Bullet) | به گلوله‌های گرافیکی معروف است که بیشتر در لیست‌های غیرمرتب ul li به کار رفته می‌شود. |
| پیکان (Arrow) | در وب بیشتر معنی فِلِش را می‌دهد. |
| روبان (Ribbon) | در طرح‌های گرافیکی نیز کاربرد زیادی دارد. |
| شفاف (Transparent) | معمولا در تصاویر با فرمت PNG و GIF در طراحی وب به کار گرفته می‌شود. |
اصطلاحات مربوط به عناصر تعاملی طراحی وبسایت
| لغات و اصطلاحات | توضیحات |
| فرم (Form) | ابزاری برای جمع‌آوری اطلاعات از کاربران. |
| دکمه (Button) | عنصری که برای انجام یک عمل خاص کلیک می‌شود. |
| منو (Menu) | لیستی از گزینه‌ها که به کاربر امکان می‌دهد به بخش‌های مختلف وبسایت دسترسی پیدا کند. |
| مادال (Modal) | پنجره‌ای که بر روی صفحه اصلی باز می‌شود و حاوی اطلاعات اضافی است. |
| توست (Toast) | پیامی کوتاه که در گوشه‌ای از صفحه نمایش داده می‌شود و پس از چند ثانیه ناپدید می‌شود. |
| اسلایدر (Slider) | ابزاری برای نمایش تصاویر یا محتوا به صورت اسلایدی. |
| اکوردئون (Accordion) | ابزاری برای نمایش محتوا به صورت تاشو. |
| فیلتر (Filter) | ابزاری برای مرتب‌سازی و نمایش نتایج جستجو بر اساس معیارهای خاص. |
| جستجو (Search) | ابزاری برای جستجوی محتوا در وبسایت. |
| اسلایدر (Slider) | ابزاری برای نمایش تصاویر یا محتوا به صورت اسلایدی و تعاملی. |
| تب (Tab) | ابزاری برای نمایش چندین بخش محتوا در یک صفحه و جابه‌جایی بین آن‌ها. |
عناصر تعاملی پیشرفته مرتبط با وبسایت
| لغات | توضیحات |
| Tooltip | متنی که هنگام قرار دادن ماوس روی یک عنصر نمایش داده می‌شود و اطلاعات بیشتری در مورد آن ارائه می‌دهد. |
| Lightbox | پنجره‌ای که برای نمایش تصاویر یا ویدیوها در اندازه بزرگتر استفاده می‌شود. |
| Carousel | مجموعه‌ای از تصاویر یا آیتم‌های دیگر که به صورت چرخشی نمایش داده می‌شوند. |
| Drag and Drop | قابلیتی که به کاربر اجازه می‌دهد تا عناصر را با کشیدن و رها کردن جابجا کند. |
| Auto-complete | قابلیتی که به کاربر کمک می‌کند تا به سرعت کلمات یا عبارات را تکمیل کند. |
| Infinite Scroll | قابلیتی که به صورت خودکار محتوا را بارگذاری می‌کند و نیازی به اسکرول کردن به پایین صفحه نیست. |
| Live Chat | چت زنده با پشتیبانی مشتری که به صورت آنلاین در دسترس است. |
مفاهیم مرتبط با تعامل
| لغات یا اصطلاحات | توضیحات |
| وایرفریم (Wireframe) | طرح اولیه‌ای از صفحه وب که ساختار کلی آن را نشان می‌دهد. |
| ماک آپ (Mockup) | طرحی دقیق‌تر از صفحه وب که ظاهر نهایی آن را شبیه‌سازی می‌کند. |
| آزمایش کاربری (Usability testing) | فرآیند ارزیابی اینکه کاربران تا چه حد می‌توانند با یک محصول یا سیستم تعامل داشته باشند. |
| Microinteractions | تعاملات کوچکی که به کاربر بازخورد فوری می‌دهند و تجربه کاربری را بهبود می‌بخشند. |
| Call to Action (CTA) | فراخوانی برای انجام یک عمل خاص، مانند کلیک روی یک دکمه یا پر کردن یک فرم. |
| User Experience (UX) | تجربه کلی کاربر در هنگام استفاده از یک محصول یا سرویس. |
| Usability | سهولت استفاده از یک محصول یا سرویس. |
| تجربه کاربری (User Experience یا UX) | مجموعه‌ای از احساسات و ادراکات کاربر هنگام استفاده از یک محصول یا سرویس است. |
| کاربر محور (User-centered) | طراحی با تمرکز بر نیازها و خواسته‌های کاربران. |
| جریان کاربر (User flow) | مسیری که کاربر در طی استفاده از وبسایت طی می‌کند. |
| Accessibility | قابلیت دسترسی به یک محصول یا سرویس برای همه کاربران، از جمله افراد دارای معلولیت. |
| رابط کاربری (User Interface یا UI) | واسطه‌ای بین کاربر و یک سیستم (مانند یک وبسایت، اپلیکیشن یا نرم‌افزار) است که به کاربر اجازه می‌دهد تا با سیستم تعامل داشته باشد. |
| تعامل انسان و کامپیوتر (Human-Computer Interaction یا HCI) | HCI به دنبال طراحی سیستم‌هایی است که به طور طبیعی و کارآمد با نیازها و توانایی‌های انسان سازگار باشند. |
| طراحی تعاملی (Interaction Design) | فرآیند طراحی محصولات، خدمات و سیستم‌های تعاملی است. طراحان تعاملی به دنبال ایجاد تجربیات کاربری جذاب و معنی‌داری هستند. |
| قابلیت استفاده (Usability) | به معنای سهولت استفاده از یک محصول یا سیستم است. |
| دسترسی‌پذیری (Accessibility) | به معنای طراحی محصولات و خدماتی است که همه افراد، صرف نظر از توانایی‌هایشان، بتوانند از آن‌ها استفاده کنند. |
اصول طراحی تعاملی
| لغات یا اصطلاحات | توضیحات |
| سادگی (Simplicity) | طراحی باید ساده و بدون پیچیدگی باشد تا کاربران به راحتی بتوانند از آن استفاده کنند. |
| کارایی (Efficiency) | طراحی باید به کاربران اجازه دهد تا به سرعت و به راحتی به اهداف خود برسند. |
| یادگیری‌پذیری (Learnability) | طراحی باید به گونه‌ای باشد که کاربران به سرعت بتوانند نحوه استفاده از آن را یاد بگیرند. |
| اطمینان (Reliability) | طراحی باید قابل اعتماد باشد و به طور مداوم عملکرد صحیحی داشته باشد. |
| جذابیت (Attractiveness) | طراحی باید جذاب و دلپذیر باشد تا کاربران را به استفاده از محصول ترغیب کند. |
تکنیک‌های بهبود تعامل
| لغات یا اصطلاحات | توضیحات |
| بازخورد (Feedback) | ارائه بازخورد به کاربر در مورد هر اقدامی که انجام می‌دهد، به او کمک می‌کند تا بفهمد که آیا عمل او درست بوده است یا خیر. |
| پیش‌بینی (Predictability) | طراحی باید به گونه‌ای باشد که کاربران بتوانند پیش‌بینی کنند که با انجام یک عمل چه اتفاقی خواهد افتاد. |
| انعطاف‌پذیری (Flexibility) | طراحی باید به کاربران اجازه دهد تا محصول را با توجه به نیازها و ترجیحات خود شخصی‌سازی کنند. |
| تست کاربری (Usability testing) | فرآیند ارزیابی اینکه کاربران تا چه حد می‌توانند با یک محصول یا سیستم تعامل داشته باشند. |
| تحلیل داده‌ها (Data analysis) | استفاده از داده‌های جمع‌آوری شده از کاربران برای بهبود تجربه کاربری. |
اصطلاحات سئو که به طراحی سایت مرتبط است
| کلمات یا اصطلاحات | توضیحات |
| بهینه‌سازی موتورهای جستجو SEO (Search Engine Optimization) | مجموعه‌ای از تکنیک‌ها برای بهبود رتبه یک وبسایت در نتایج جستجوی موتورهای جستجو. |
| سئو داخلی (On-Page SEO) | به مجموعه اقداماتی گفته می‌شود که به طور مستقیم روی صفحات وبسایت شما انجام می‌شود تا رتبه آن در نتایج موتورهای جستجو بهبود یابد. |
| تگ عنوان (Title Tag) | مهم‌ترین تگ در صفحه که عنوان صفحه را مشخص می‌کند و در نتایج جستجو نمایش داده می‌شود. |
| تگ توضیحات (Meta Description) | متنی کوتاه که خلاصه‌ای از محتوای صفحه را ارائه می‌دهد و در نتایج جستجو زیر عنوان نمایش داده می‌شود. |
| کلمات کلیدی (Keywords) | کلمات یا عباراتی که کاربران برای جستجوی محتوای مورد نظر خود در موتورهای جستجو استفاده می‌کنند. |
| تگ‌های هدینگ (Heading Tags) | تگ‌هایی مانند H1، H2، H3 و … که برای ساختاردهی محتوا و مشخص کردن اهمیت بخش‌های مختلف صفحه استفاده می‌شوند. |
| متن جایگزین تصاویر (Alt Text) | متنی که برای توصیف تصاویر استفاده می‌شود و به موتورهای جستجو کمک می‌کند تا محتوای تصاویر را درک کنند. |
| ساختار URL | آدرس صفحات وبسایت که باید ساده، کوتاه و شامل کلمات کلیدی مرتبط باشد. |
| سرعت بارگذاری صفحه (Page loading speed) | سرعت لود شدن یک صفحه که بر روی تجربه کاربری و رتبه‌بندی سایت تأثیرگذار است. |
| پاسخگویی (Responsive Design) | طراحی وبسایتی که به صورت خودکار با اندازه صفحه نمایش‌های مختلف سازگار شود. |
زبان‌های برنامه نویسی پایه برای ساختار و ظاهر وبسایت
| مدل زبان | توضیحات |
| HTML (HyperText Markup Language) | ساختار اصلی صفحات وب را تعریف می‌کند. |
| CSS (Cascading Style Sheets) | ظاهر و چیدمان عناصر HTML را کنترل می‌کند. |
| JavaScript | برای ایجاد تعاملات دینامیک و بهبود تجربه کاربری استفاده می‌شود. |
| React | کتابخانه جاوا اسکریپت برای ساخت رابطهای کاربری پیچیده و تعاملی. |
| Angular | فریمورک جاوا اسکریپت برای ساخت اپلیکیشن‌های تک صفحه‌ای. |
| Vue.js | فریمورک جاوا اسکریپت سبک و انعطاف‌پذیر برای ساخت رابطهای کاربری. |
| PHP | یکی از محبوب‌ترین زبان‌ها برای توسعه وب سمت سرور است. |
| Python | زبانی قدرتمند که برای توسعه وب و بسیاری از کاربردهای دیگر استفاده می‌شود. |
| Ruby | زبانی با سینتکس ساده که برای توسعه سریع وبسایتها استفاده می‌شود. |
| Node.js | محیط اجرای جاوا اسکریپت سمت سرور که برای ساخت اپلیکیشن‌های وب سریع و مقیاس‌پذیر استفاده می‌شود. |
| Bootstrap | فریمورک CSS برای ساخت وبسایتهای پاسخگو. |
| SQL | زبان ساختار یافته برای مدیریت پایگاه‌های داده رابطهای. |
| MySQL | یکی از محبوب‌ترین سیستم‌های مدیریت پایگاه داده رابطهای. |
| MongoDB | یک پایگاه داده NoSQL محبوب که برای ذخیره داده‌های JSON استفاده می‌شود. |
CMS های اختصاصی برای طراحی وبسایت
| نام CMS | توضیحات |
| CMS مخفف عبارت Content Management System سیستم مدیریت محتوا | CMSها به شما این امکان را می‌دهند که بدون نیاز به دانش فنی پیچیده، وبسایت خود را طراحی کنید و محتواهای آن را به روز نگه دارید. |
| وردپرس (WordPress) | محبوب‌ترین CMS در جهان است و برای طیف گسترده‌ای از وبسایتها از جمله وبلاگ‌ها، فروشگاه‌های آنلاین و وبسایتهای شرکتی استفاده می‌شود. |
| جوملا (Joomla) | CMSی قدرتمند است که برای ساخت وبسایتهای پیچیده‌تر و دارای ویژگی‌های خاص طراحی شده است. |
| دروپال (Drupal) | CMSی بسیار انعطاف‌پذیر و قدرتمند است که برای ساخت وبسایتهای بزرگ و پیچیده مناسب است. |
| مجنتو (Magento) | CMSی تخصصی برای ایجاد فروشگاه‌های آنلاین است. |
| سیستم مدیریت محتوای اختصاصی یا Custom CMS | CMSهای اختصاصی مطابق با نیازهای خاص یک کسب‌وکار سفارشی‌سازی می‌شوند. |