ساخت راهنمای سبک طراحی سایت

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

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

الگوی راهنمای سبک

به نقطه شروع نیاز دارید؟ الگوی راهنمای سبک ما شما را در کمترین زمان شروع می کند. این شامل نمونه هایی از نحوه استفاده است:

• لوگوها
• فونت ها
• رنگ ها
• دکمه ها
• نمادها

و سایر عناصر بصری که برای ایجاد راهنمای سبک خود به آن نیاز دارید – اکنون آن را دانلود کنید!

راهنمای سبک طراحی وب چیست؟

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

چرا باید راهنمای سبک طراحی درست کنیم؟

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

راهنمای سبک در مقابل سیستم طراحی

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

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

چرا باید یک راهنمای سبک ایجاد کنید؟

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

مزایای ایجاد یک راهنمای سبک

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

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

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

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

نحوه ایجاد یک راهنمای سبک طراحی وب (در 11 مرحله)

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

مرحله 1: نام تجاری خود را مطالعه کنید

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

مرحله 2: قوانین استفاده از لوگوی خود را تعیین کنید

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

مرحله 3: پالت رنگ خود را تعریف کنید

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

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

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

مرحله 4: قوانینی برای تایپوگرافی ایجاد کنید

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

علاوه بر سرفصل‌ها، می‌خواهید سبک‌هایی را برای اجرای متن (بدنه) و همچنین فرم‌ها، پیام‌های هشدار و موارد دیگر نیز در نظر بگیرید. این سبک‌ها شامل خانواده فونت‌ها – که مجموعه‌ای از فونت‌ها مانند Roboto، Lato یا Montserrat هستند – و اندازه‌ها هستند.

اندازه فونت باید در پیکسل (px) نوشته شود و در بین عناصر ثابت بماند. همچنین می‌خواهید با استفاده از اندازه‌های پیشرونده مانند 14 پیکسل، 16 پیکسل، 18 پیکسل یا 20 پیکسل، و اجتناب از اندازه‌های متوسط ​​مانند 15 پیکسل، توسعه‌دهندگان خود را راضی نگه دارید.

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

مرحله 5: قوانین Layout و Spacing را تنظیم کنید

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

مرحله 6: Icon Style را در نظر بگیرید

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

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

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

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

مرحله 7: دستورالعمل هایی را برای تصاویر و تصاویر تعریف کنید

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

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

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

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

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

مرحله 8: ملاحظات سبکی را برای اجزای اصلی وب سایت ترسیم کنید

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

برای پیشبرد کارها برای هر نوع دکمه، می‌توانید حالت‌های مختلف آن مانند منظم، شناور، فعال یا متمرکز را در نظر بگیرید. شما همچنین باید برای عناصر فرم مختلف مانند دکمه های رادیویی یا چک باکس ها استایل ها را تعریف کنید. بهترین کار این است که برای شناسایی هر عنصر مهمی که در راهنمای سبک خود وجود ندارد به کتابخانه اجزایی مانند Google’s Material Design یا Alibaba’s Ant Design مراجعه کنید.

مرحله 9: صدای برند خود را توسعه دهید

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

مرحله 10: بایدها و نبایدهای خاص را درج کنید

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

مرحله 11: دارایی های قابل دانلود را فراموش نکنید

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

• لوگوی شما در تمام قالب های مختلف سایت مناسب برای وب و چاپ است
• یک کیت مطبوعاتی با مواد مارک لازم
• نمایش کوتاهی از کتاب برند شما
• راهنمای سبک در قالب PDF

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

برای راهنمای سبک خود الهام بخش بیابید

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

خود، می خواهید خود را با بهترین شیوه ها و همچنین منابعی برای الهام بخشیدن به کار خود آشنا کنید.

برای کمک به شما در این زمینه، چند نمونه زیبا از راهنماهای سبک جمع آوری کرده ایم تا تصوری از نحوه نشان دادن هویت برندهای مختلف به صورت آنلاین به شما ارائه دهیم. منابع الهام دیگر می تواند شامل دایرکتوری های آنلاین مانند Style Guides.io یا Design Systems Repo باشد که در آن می توانید نمونه های مختلفی از راهنماهای سبک و سیستم های طراحی را از شرکت ها و برندهای پیشرو بیابید.

راهنمای سبک خود را به روز نگه دارید

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

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

در هر صفحه ای که با Elementor ویرایش می کنید، به پنل سمت چپ بروید و روی نماد بالا سمت چپ کلیک کنید. این شما را به پانل تنظیمات جهانی می برد. در اینجا، می توانید به بسیاری از تنظیمات سایت خود مانند تنظیمات لایت باکس و همچنین پیش فرض های چیدمان دسترسی داشته باشید.

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

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

با یک راهنمای سبک، سازگاری برند را حفظ کنید

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

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

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

انواع طراحی سایت با وردپرس