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

اصطلاح رایج طراحی در وبسایت‌ها

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

۱- Kerning یا فضای بین کاراکترها

زمانی که برای اولین بار کلمه‌ی Kerning (فاصله‌ی میان کاراکترها و فونت‌ها در طراحی) به گوشم خورد، به سختی می‌توانستم به بیلبورد‌ها و تبلیغات نگاه کنم، دیدن آنها واقعاً دردناک بود، کلمات و اعداد اغلب به صورت تصادفی فاصله گرفته بودند یا برای جای‌گیری در فضایی خودسرانه دسته‌بندی شده بودند.
در مدت زمان کوتاهی متوجه شدم که تعریف درست Kerning این نیست و هر چه یاد گرفتم تعریفی برای Tracking می باشد.
درحالی که Kerning فضای بین کاراکتر‌ها است، Tracking فضای بین کاراکترهای مجزا است. این اولین اصطلاح رایج طراحی در وبسایت‌ها محسوب می شود.

۲-پس‌زمینه

حتماً با خود فکر می‌کنید درک چیزی که در پس‌زمینه یا background است کار سخت و دشواری نمی باشد. ولی در شرایط طراحی، اغلب با پرده یاbackdrop اشتباه گرفته می‌شود.
مثلا گفتن جمله “آن خط افق برای backdrop عکس مناسب است” اشتباه می باشد.
چون خود خط افق به تنهایی یکی از عنصر‌های عکس است و جمله درست “آن خط افق برای background عکس مناسب است” را شامل می‌شود.
یک مثال زیبا برای backdrop بکار بردن صفحات مات می باشد که پشت شخصی به صورت مجموعه‌ای از قطعات قرار گرفته است.
در یک جمله می‌توان گفت که background قسمتی از طراحی است و backdrop بخشی از راه‌اندازی. 

۳-خوانایی

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

۴- فونت

تقریباً هر یک از ما این واژه را به اشتباه بکار می بریم. فونت‌ها (fonts) مجموعه‌ای از وزن‌های مختلف برای کاراکترها می باشند (معمولی، توپر، فشرده).
سبک حروف (typeface) خانواده‌ای از فونت‌ها برای کاراکتر‌ها هستند. حتی در css ما با استفاده کردن از Font_family و Font_weight بین فونت و سبک حروف تمایزقائل می‌شویم.

۵- تک‌رنگ (monochrome)

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

۶-درجه خاکستری

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

همان‌طور که طراحان اصطلاحات تک‌رنگ و درجه‌ی خاکستری را به اشتباه بکار می برند، سیاه و سفید و درجه‌ی خاکستری را هم به اشتباه بکار می برند. در سیاه و سفید اصلاً از خاکستری استفاده نمی‌شود. و نه تک رنگ است و نه درجه‌ی خاکستری.

۷- رنگ

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

۸- آرم‌ها یا لوگو‌ها

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

حال لوگوتایپ شامل دو زیرمجموعه می باشد که نشانه‌های لغتی و نشانه‌های حروفی نام دارند. سی‌ان‌ان یک نشانه‌ حروفی می باشد زیرا از حروف الفبا یک لوگو ایجاد کرده که مختصر شده عبارت Central News Network or National می باشد. ناسا هم از حروف الفبا یک لوگو ساخته که مختصر شده عبارت National Aeronautics and Space Administration است.

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

۹- wireFrame یا نمونه‌سازی

نمونه‌سازی یا wireframe در حقیقت یک نوع طراحی میباشد که محتویات ایجاد شده و تولید شده را نمایش می‌دهد.
wireframe را با مدل و نمونه اولیه اشتباه نگیرید. در اغلب موارد سازنده‌های صفحات وردپرس((page builders به دلیل نشان دادن صفحه واقعی امکان کار با صفحه و چگونگی چیده شدن مطالب کنار یکدیگر و امکان کار کردن یک نمونه اولیه را ایجاد می‌کنند.

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

۱۰- حاشیه

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

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

۱۱- فضای خالی

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

امیدوارم این مطلب برایتان مفید بوده باشد.