راهنمای سبک (Style Guide) در طراحی سایت

راهنمای سبک (Style Guide) در طراحی سایت

راهنمای سبک (Style Guide) در طراحی سایت – ایجاد و خلق وب سایت هایی جذاب و متفاوت با گذشت زمان پیچیده تر شده و دیگر یک کار انفرادی نیست. اینکه بتوان سایت هایی طراحی نمود که هم از نظر کسب و کار و هم لذت کاربر از تماشا و کار با سایت بهینه و کارآمد باشد از اهمیت بسیار بالایی برخوردار است.

یکی از روش ها، برای اطمینان از طراحی درست سایت، هنگامی که یک تیم روی بخش های مختلف آن کار می کند و یا جدا کردن بخش طراحی از توسعه، ایجاد سند طراحی (design documentation) و یا سبک راهنمای طراحی سایت (Web design style guide) است.

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

Style Guide چیست؟

راهنمای سبک (Style Guide) در طراحی سایت

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

چرا مهم است؟

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

بعلاوه در این صورت توسعه دهندگان می دانند که دقیقا دارای چه المنت های نوشته شده ای هستند و چه مواردی را می بایست از ابتدا شروع به نوشتن کنند.

نحوه ایجاد یک style guide

۱- در ابتدا می بایست شرکت مورد نظر را بررسی نمود که اصولا چه ایده ای برای تشکیل شرکت و طراحی برند آن در نظر گرفته شده است. هرچه بیشتر این موارد بررسی و واکاوی شوند، style guideبهتری می توان درست کرد.

۲- نحوه نگارش، مطابق بررسی ها، نگارش محتوا ۹۵ درصد طراحی سایت را تشگیل می دهد، نحوه نگارش سایت باید کاملا تعیین شود زیرا مهم ترین راه ارتباطی سایت با کاربران می باشد.

راهنمای سبک (Style Guide) در طراحی سایت

انواع مختلف سرتیتر : h1، h2، h3، h4، h5، h6 . انواع مختلف bold -italic و … همچنین سفارشی سازی لینک ها، استفاده از فونت های زیبا و ضخامت فونت ها همگی و همگی می بایست در نگارش مد نظر قرار گرفته شود.

۳- پالت رنگ: انسانها بطور عجیبی رنگ ها را درک و با آن ارتباط برقرار می کنند، بطور مثال به برند کوکا کولا فکر کنید قطعا اولین چیزی که در ذهنتان خواهید دید رنگ قرمز برند کوکا کولاست.

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

راهنمای سبک (Style Guide) در طراحی سایت

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

راهنمای سبک (Style Guide) در طراحی سایت

۵- تصاویر: تصاویر هم به اندازه کلمات مهم هستند. حتما از تصاویر مناسب و گویا برای سایت استفاده باید استفاده شود. همانطور که پیش تر گفته شد اگر درباره کمپانی مورد نظر تحقیق شود می توان تصاویر مناسبی برای آن سایت انتخاب کرد.

راهنمای سبک (Style Guide) در طراحی سایت

۶- فرم ها: فرم ها، چیزهایی هستند که سایت یا وب اپلیکیشن را تعاملی و پویا می کند و بنابراین کاربر می تواند داده را وارد نموده و می توان با کاربر تعامل داشت.

از ظاهر زیبا برای فرم ها حتما می بایست استفاده نمود و همچنین از پیغام هایی بنظر ساده اما کاربردی هستند استفاده نمود مثلا ؛پیغام شما با موفقیت ارسال شد؛

۷- دکمه: دکمه ها ترکیبی از پالت های رنگ و فرم ها هستند. باید دکمه ها دارای طراحی حرفه و متفاوت باشند.

۸- فضا: استفاده از فضاها در style guide دارای اهمیت زیادی است. فضای بین عنوان ها، دکمه ها، تصاویر،‌فرم ها و دیگر المنت ها بسیار مهم است. داشتن فضای درست به این دلیل مهم است که باعث ایجاد نوعی تنفس بین عناصر شده و باعث حرفه ای شدن طراحی می گردد.

مثال ها: در زیر سایت هایی برای کمک به طراحی style guide آ ورده شده است

راهنمای سبک (Style Guide) در طراحی سایت

پالت رنگ

منبع: دوران دات نت

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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

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