اصول طراحی صفحات وب – آشنایی با طراحی صفحات

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

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

گام های اولیه‌ اصول طراحی صفحات وب

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

 الف) نیازسنجی

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

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

ب) تهیه طرح اولیه

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

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

ج)تولید محتوا

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

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

د) پیاده سازی

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

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

ه) آماده سازی و انتشار

پس از پیاده سازی و درج محتوای صفحات وبسایت می بایست با انتخاب نام دامنه و تهیه فضای میزبان نسبت به آماده سازی و انتشار وبسایت بر روی سرور وب اقدام نمود.

و) اشکال زدایی و توسعه

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

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

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

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

طراحی

در اصول طراحی صفحات وب و در حوزه طراحی موارد قابل توجهی مد نظر می تواند باشد که از آن جمله به موارد زیر اشاره می کنیم:

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

مخاطب محوری

در اصول طراحی صفحات وب و در حوزه مخاطب محوری توجه به موارد زیر کیفیت طراحی را ارتقا می بخشید:

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

ساختار اطلاعات

در اصول طراحی صفحات وب توجه به ساختار اطلاعات از نقطه نظرات زیر دارای اهمیت ویژه ای است:

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

محتوا

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

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

پشتیبانی

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

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

رنگ ها در وب

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

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

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

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

نمایش رنگ

نمایشگرهای رایانه ای از هزاران نقطه رنگی تشکیل شده اند که پیکسل نام دارند. و همه رنگ ها را با ترکیب سه رنگ قرمز  (Red) سبز  (Green) و آبی (Blue) می سازند. به همین دلیل هنگام انتخاب رنگ برای صفحات وب یا تصاویری که قرار است روی نمایشگر دیده شوند باید از سیستم رنگ RGB استفاده کنید که از ترکیب حروف اول این سه رنگ ساخته شده است.

برای تولید یک رنگ در سیستم RGB ، هریک از رنگ ها می توانند کدی بین صفر تا 255 داشته باشند. برای مثال رنگ سفید از ترکیب R=255, G=255, B=255  ساخته می شود که نتیجه نمایش بیشترین درجه قرمز، سبز و آبی است. به همین ترتیب برای نمایش رنگ قرمز از ترکیب R=255, G=0, B=0 استفاده می شود. و برای ساخت رنگی مثل زرد باید R و G را برابر 255 و B را برابر صفر قرار دهید.

بنابراین از ترکیب سه رنگ که هر یک می توانند 255 حالت داشته باشند، معادل تعداد  16.777.216 رنگ نمایش به دست می آید.

در هنگام طراحی صفحات وب، به جای استفاده از قالب عددی ذکر شده، مقادیر رنگ ها را در یک سیستم هگزادسیمال (مبنای شانزده) نمایش می دهند و هر رنگ حداکثر دو رقم را به خود اختصاص می دهد که م یتواند بین 00 تا FF (معادل صفر تا 255 در مبانی دهدهی) متغیر باشد. به این ترتیب عدد 255 در مبنای شانزده به صورت FF در می آید و مثال رنگ سفید به صورت FFFFFF نشان داده می شود. جدول زیر نحوه نمایش تعدادی از رنگها را در سیستم RGB و هگزادسیمال نشان می دهد.

رنگ های امن وب

در نرم افزارهای گرافیکی مانند فتوشاپ هنگام تعیین رنگ می توانید از کدهای هگزادسیمال یا سیستم RGB بـرای انتخاب رنگ مـوردن ظر بهره ببرید. در اغلب این نرم افـزارهـا گـزینه ای بـه نـام Color Web  وجود دارد که با تأیید آن، انتخاب شما به رنگ هایی بسیار کمی محدود می شود. این دسته از رنگ ها را که زیر مجموعه ای کوچک از16.777.21رنگ قابل تولید در سیستم RGB هستند، رنگ های امن وب مینامند.

این نوع رنگ ها در سیستم عامل های مختلف، مرورگرهای قدیمی و نیز رایانه هایی که از نظرسخت افزاری چندان قوی نیستند، دقیقا مطابق با طراحی اولیه نشان داده می شوند. در رنگ های امن وب برای هر یک از رنگ های R و G و B فقط مقادیر جدول زیر مجاز است:

بنابراین رنگهای (51,204,0(RGB  و (3300CC(HEX  رنگ های امن وب محسوب می شوند. اما رنگ های (50,204,10(RGB و  (FF0021HEX) ممکن است در برخی مرورگرها مطابق با انتظار طراح نشان داده نشوند و رنگ آن ها با افزایش نور به یکی از رنگ های امن وب نزدیک شود.

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