ایجاد دستورالعمل های طراحی سایت

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

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

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

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

دستورالعمل های برند سازی: چه مواردی را باید در این زمینه مهیا کنید؟

مرور استراتژیک بر برند

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

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

لوگوها

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

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

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

نشان دادن مثال هایی از باید ها و نبایدها

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

I LOVE NEW YORKمثال خوبی از مواردی است که نباید در طراحی لوگو انجام شود. به تصویر بالا نگاه کنید. این طراحی یک لوگو زیبا که دارای چند کلمه نیز می باشد را به وجود می آورد.

فاصله گذاری ها

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

در تصویر بالا،BLACKBERRYنه تنها اهمیت فاصله گذاری را به وضوح بیان می کند، بلکه از حرفBهم در طراحی لوگو خود استفاده می کند تا این طراحی، وضوح عالی برای مخاطبین خود داشته باشد.

رنگ ها

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

CHANNEL 4تمامی رنگ های متناسب برای طراحی سایت و طراحی موارد چاپی را نشان می دهد و نمونه ای که در تصویر زیر می بینید، در انتخاب کردن نوع رنگ در پروژه های طراحی تان بسیار کمک می کند.

THE NEW SHCHOOLنمونه عالی برای تعیین رنگ های اولیه می باشد و برای هر طراحی مانند طراحی موارد چاپی (پنتون وCMYK) و طراحی سایت (RGB) رنگ های متناسب را مشخص می سازد. دستورالعمل های طراحی این برند نیز بسیار زیبا مهیا شده است.

تصویر بالا نشان دهنده یک دستورالعمل شخصی برای طراحی ها می باشد.CHRISTOPHER DOYLEبرخی رنگ ها و تست آن روی شخص واقعی را نشان می دهد. او در ساخت دستورالعمل در زمینه رنگ ها بسیار عالی عمل کرد: هر موردی ارزش امتحان کردن را دارد.

فونت ها

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

YALEدارای فونت منحصر به فرد خود می باشد.

در تصویر بالا، در بخش فونت طراحی وب سایت،YALEتوضیح می دهد که چه زمانی باید از فونت ها استفاده نمود. این مورد دارای فونت های مخصوص طراحی وب سایت می باشد و توضیح می دهد که در هر بخش از طراحی، باید از کدام فونت ها استفاده نمود.

طرح بندی ها و شبکه ها

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

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

حالت و هدف طراحی

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

EASYJETچه از نظر نوشتاری و یا طرز بیان در متن طراحی برند، می تواند مثال خوبی برای هر دو مورد باشد.

دستورالعمل های نوشتن متن طراحی

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

CANدر دستورالعمل های خود یادآوری می کند که متن باید عاری از غلط املایی و نگارشی باشد.

موارد بصری در طراحی

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

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

جمع آوری تمامی این موارد کنار هم

مثال هایی از این که یک طراحی لوگو، تصویر و متن باید در کنار هم به چه شکل باشند و چگونه نمایش داده شوند، به مشتریان طراحی خود ارائه دارید.

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

دستورالعمل ها در طراحی سایت ها: چه مواردی را باید در این زمینه مهیا کنیم؟

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

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

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

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

GUMMTREEبرای تعیین حالت دکمه های طراحی سایت خود بسیار تلاش نمود. تصویر بالا مربوط به طراحی مجدد وب سایتGUNTREEمی باشد که هنوز هم همین طراحی سایت را نگاه داشته است.

آیکون ها

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

شرکتZURB(در تصویر بالا)، اندازه آیکون ها و زمانی که باید از آن ها استفاده کرد را مشخص می سازد و این امر برای مشتریان یک منبع آنلاین محسوب می شود که می توانند مواردی که مد نظرشان می باشد را دانلود کنند.ZURBعلایم استفاده شده در طراحی و هدف آن ها را مشخص می کند.ZURBمعتقد می باشد که دستورالعمل های آنلاین بسیار عالی و فوق العاده ای را به اشتراک گذاشته است.

جستجو یابی (مکان قرار گیری لوگو ها)

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

در تصویر بالا یکی از دستورالعمل های زیبایی است که تا به حال دیده ام.BBCنشان می دهد که باید با نام های طولانی کاربران چه کار کرد و چه میزان فضای خالی باید برای هر کدام استفاده نمود و غیره.

دستورالعمل های پایه برای برنامه نویسی وب سایت

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

• طبقه بندی های نامگذاری درCSS

آیا باید از.Camelcaseیا.Words-With-Dashesاستفاده نمود؟

• یکپارچه سازیJAVASCRIPT

آیا ازJQUERYاستفاده می کنید؟MOOTOOLS؟ چگونهJAVASCRIPTجدید می تواند متحد و یکپارچه شود؟

• طراحی فرم

برنامه نویسی، اخطار خطا و غیره را طوری در فرم وب سایت قرار دهید دهید که مشتریان سبک مورد نظر تان را به خوبی درک کنند.

• نوع مستندات سازی و الزامات امنیتی و صحت اعتبار وب سایت

آیا از آیتم های معتبری استفاده می کنید؟ آیا می خواهیدCSSوHTMLمعتبر و قانونی داشته باشید؟

• ساختار دایرکتوری

مشخص سازید که دایرکتوری را چگونه سازمان دهی کرده اید.

• استاندارد های دسترسی و استفاده از طراحی سایت

آیا مردم باید در وب سایت خود از تگ هایALTاستفاده کنند؟ آیا تصاویر جای خود را به فونت های غیر استاندارد می دهد؟

• تست روش های استفاده شده در طراحی سایت

طبق چه استاندارد هایی مشتریان باید طراحی و روش های آن را تست کنند؟

• کنترل نسخه وب سایت

از چه سیستمی استفاده می کنید؟ چگونه مشتریان می توانند نسخه های جدید برنامه نویسی را بررسی کنند؟

چگونگی ساخت الگو و فرمت

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

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

در این جا عملکرد هایی وجود دارد که می توانید برای ساخت دستورالعمل های خود در پروژه های طراحی استفاده کنید:

• قرار دادن یک نشانه

این مورد می تواند مثال خوبی از طراحی یک لوگو باشد.

• زیبا ساختن آن

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

• قرار دادن جزئیات تماس و ارتباطی

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

• دسترسی ساده

معمولا این مورد به معنای قرار دادن فرمتPdfبه صورت آنلاین است. خیلی حجم اینPDFرا وسیع نسازید و از تصاویر نیز استفاده کنید.

• قابل چاپ ساختن این دستورالعمل ها

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

• امکان تغییرات ساده

بروزرسانی، اضافه کردن صفحات جدید و ایجاد تغییرات باید ساده باشد.

• ساخت یک نسخه کوچک

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

• هر زمان که امکان دارد، الگوی قابل پرینتی را تهیه کنید

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

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

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