نحوه ایجاد راهنمای سبک وب سایت برای برند شما

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


ایجاد راهنمای سبک وب سایت

بگذارید یک سناریو را اینجا نقاشی کنیم. بگویید وب سایت شما هم از نظر محتوا و هم در تعداد افرادی که برای نگهداری از آن باید وارد شوید ، به سرعت در حال رشد است. شما طراحان ، توسعه دهندگان ، نوشتن نسخه های تبلیغاتی ، مدیران رسانه های اجتماعی را استخدام کرده اید – کل شیبان. هر شخص می آید و می رود ، و سهم خود را در کلیه طرح های بزرگ ارائه می کند – با این وجود قوام برند شما amok را اجرا کرده است. برخی از لینک های دکمه ای به رنگ آبی هستند. دیگران سبز هستند. یک زیر عنوان در اندازه 26px است. زیر عنوان دیگر 24px است. آرم شما بیش از حد در یک صفحه قرار دارد اما یک صفحه دیگر بسیار کم است …

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

این جایی است که یک راهنمای سبک وارد می شود.

یک راهنمای سبک چیست و چرا تجارت من به یک مورد نیاز دارد?

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

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

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

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

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

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

کسب و کار آنلاین شما اگر و چه موقع از یک راهنمای سبک بهره مند می شود:

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

راهنمای سبک شما در وب سایت شما وجود دارد

قبل از شروع به کار راهنمای سبک خود ، باید محلی را که در آن وجود دارد تعیین کنید. بهترین روش این است که منطقه خود را در وب سایت خود ، یا به عنوان دایرکتوری اختصاص دهید (www.yourdomain.com/styleguide) یا به عنوان زیر دامنه (styleguide.yourdomain.com).

توجه سریع: به یاد داشته باشید که راهنمای سبک شما باید همان پرونده CSS را با بقیه وب سایت شما به اشتراک بگذارد. این تضمین می کند که به روز رسانی های طراحی در یک فوراً در دیگری منعکس می شود و همه چیز را یکپارچه و مداوم نگه می دارد.

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

بیایید این را از راه خارج کنیم: ایجاد راهنمای سبک شما به زمان نیاز دارد. اما انرژی مورد نظر خود را به عنوان سرمایه گذاری در نظر بگیرید که در طولانی مدت باعث صرفه جویی بیشتر در وقت شما (و پول) می شود.

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

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

راهنمای سبک در مقابل کتابخانه های الگوی

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

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

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

نحوه ایجاد یک راهنمای سبک

برای تهیه یک راهنمای سبک که همه جعبه ها را نشان می دهد ، مراحلی که می خواهید انجام دهید:

مرحله 1. ذات برند خود را تعریف کنید

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

مرحله 2. قوانین آرم خود را تنظیم کنید

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

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

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

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

نمونه راهنماي نگارگري BBCبی بی سی نشانه گذاری و چیدمان عناصر تایپوگرافیکی آنها را به اشتراک می گذارد – یک ضرورت برای یک سازمان بزرگ خبری که از عناوین مختلف زیادی با اهمیت متفاوت استفاده می کند.

مرحله 4. درباره پالت رنگ خود تصمیم بگیرید

رنگ می تواند چیزی بیش از نمایانگر بصری از برند شما باشد – این امر می تواند بر روانشناسی کاربران شما تأثیر بگذارد. سایه مشخص قرمز حتی می تواند به یک رنگ تبدیل شود و به یک پیوند ناخودآگاه تبدیل شود یک نوشابه خاص.

مثال راهنمای رنگ موزیلاموزیلا مارک خود را با تعریف پالت رنگ نرم افزار خود سازگار نگه می دارد. مهم است که کدهای رنگی را در HEX ، Pantone ، HSB ، CMYK و RGB درج کنید. اگر به این مناسبت پیش بیاید که نام تجاری شما باید فراتر از صفحه کامپیوتر باشد ، شما برای آن آماده خواهید بود!

مرحله 5. تعیین نماد مناسب

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

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

مرحله 6. تصویرسازی درست را تعیین کنید

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

مرحله 7: سیستم چیدمان و شبکه را بسازید

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

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

مرحله 8: عناصر را سبک کنید

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

تشکیل می دهد

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

دکمه ها

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

منوها

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

مدالها

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

اثرات متقابل و انیمیشن

باور کنید یا نه ، نام تجاری شما حتی با لحظه ای از میلی ثانیه اثر شناور می تواند در جزئیات بیان شود. پیوند متنی با انیمیشن مقدار:: 500ms سهولت در؛ a یک شخصیت متفاوت و احساس فوریت را در مقایسه با {انیمیشن انتقال می دهد: 100ms خطی؛ }.

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

درباره محتوا را فراموش نکنید

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

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

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

راهنماهای سبک محتوا می تواند بسیار جامع باشد ، حتی شامل قوانین دستور زبان است که شما از یک استاد انگلیسی انتظار دارید. راهنمای برای گلدان+ فقط همین کار را می کند (راهنمای محتوای آنها حتی به من می گوید که آن را به عنوان “Tuts +” بنویسید نه “Tutsplus”!)

نتیجه

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

میلیون ها شغل در آنجا وجود دارد – اما تنها یک شما وجود دارد. با محکم بودن با نحوه ارائه ، از ارزش منحصر به فرد بودن خود محافظت کنید. اکنون از یک راهنمای سبک برای یک مارک تجاری استفاده کنید که در آینده قابل تشخیص باشد.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me