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

مقدمه

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

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

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

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

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

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

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

اکثراً رسانه‌ها تأثیر گذار هستند و هدف آ‌نها ایجاد علاقه کافی است تا اینکه سرانجام بتواند تبادل مطلوب را انجام دهند .

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

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

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

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

 هدایت و توسعه وب جاری

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

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

ابزارها و تکنولوژی

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

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

و از Dream Wearer , Front Page استفاده می‌شود . در آینده می‌توانید تشکیلات خود را به آخرین درجه پیشرفت برسانید و همواره با زمان جلو روید این ابزارهای قدرتمند که در صنعت نیز قابل رقابت هستند در دوره CIW ارائه خواهند شد . این ابزارها با هم هماهنگی خاصی دارند .

رسانه‌های واسط

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

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

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

محاسبه مهارتهای HTML خود

در این تمرین شما مهارت HTML خود را با ایجاد یک صفحه ساده محاسبه خواهید کرد . شایان ذکر است که مندرجاتی شما بکار می‌برید می‌تواند متفاوت از مندرجات بکار برده شده در این تمرین باشد .

تمرین ایجاد یک صفحه وب پایه :

در این تمرین شما یک صفحه وب ساده ایجاد خواهید کرد و توانایی HTML خود را محک می‌زنید.

1 از الگوی HTML برای ایجاد قالبهای زیر استفاده کنید .

 Table

Hyper Link ( استفاده از پروتکل HTTP )

Font

Image

در این فصل شما با مفاهیم تکنولوژی و ابزارهای مورد استفاده آن و مختصراً‌با مشکلاتی که برای بکارگیری این تکنولوژی استفاده می‌شود آشنا شدید و در نهایت مهارت HTML خود را محاسبه کردید .

معرفی فصل

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

کاربران وب و نکاتی در طراحی سایت

حدس می‌زنید که چه مقدار از متن صفحه وب شما به طور واقعی توسط کاربر خوانده می‌شود ؟ تمام آن ؟ بیشتر آن ؟ حقیقت آن است که کاربران اغلب هیچ مقداری از آن را نمی‌خوانند . به دنبال این جمله باید گفت که درحدود 80% از مردم فقط در مندرجات سایت پویش می‌کنندو به دنبال نکات و عبارت کلیدی می‌گردند . به طور متوسط 25% کاربرای در خواندن روی مانیتور نسبت به خواندن از روی چاپ آهسته‌تر عمل می کنند . بنابراین ،‌این واقعیت چگونه بر ساختار صفحه شما اثر می‌گذارد؟ به عنوان یک طراح شما باید صفحه‌ای ایجاد کنید که کاربران بتوانند سریع آن را کاوش کرده و اطلاعات مطالبه کرده را پیدا کنند . بخاطر آورید که یکی از تناقضات در طراحی وب این است که تصور کنید که وب فرم دیگری از رسانه‌ چاپ است . هنگامی که طرح یک صفحه با مندرجات مشابه به یک مجله و یا بروشور ایجاد می‌کنید کاربران به طور مسلم به سایت دیگری خواهد رفت چرا که شما در نظر نگرفتید که ماهیت مطالب بر روی وب باید با دیگر رسانه‌ها به خصوص چاپ متفاوت باشد . هنگامی که کاربران به سایت شما می‌رسند اولین حسی که در آنها ایجاد می‌شود از ا همیت زیادی برخوردار است . مثلاً ممکن است سایت وب شما که به قصد تجارت ایجاد شده است فقط یک پنجره داشته باشد ولی به هر حال اگر به نظر مشتری غیر جذاب باشد شما مشتری خود را به رقیب خود واگذار کردید . بنابراین اگر بدانید که بازدیدکنندگان فقط سایت شما را مرور  می‌کنند متوجه خواهید شد که چرا نباید کاربران رامجبور به خواندن مطالبی کنید که برای آنها جالب نیست . کاربران را راضی نگه دارید و آنچه را که می‌خواهند به آنها عطا کنید ، حتماً آنها به سایت شما باز خواهند گشت . ( قابل ذکر است قواعد بازار یابی در سایتهای تجاری متفاوت تر از دنیای واقعی می‌باشد )

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

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

سایتی نظیر سایت www.xnn.com را در نظر بگیرید به محض ورود به سایت سریعاً می‌توانید مرور کلی از کل سایت داشته باشید و یا به عبارت دیگر شما می‌توانید کل سایت را با نگاه از یک عبارت به عبارت بعدی مرور کنید و آنچه را که بخواهید خیلی سریع بدست آورید . بنابراین تمایل به دیدن مجدد سایت را دارید . سایت فوق از نمونه سایتهای موفق در جهان می‌باشد .

واقعیت در طراحی

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

1 بیشتر کاربران از مانیتو رهای Inch 17 یا کمتر استفاده می کنند .

2 بیشتر کاربران با تنظیم تفکیک‌پذیری 640*480 کار می‌کنند .

3 بیشتر کاربران دارای مودم‌های با سرعت K56 هستند .

4 اغلب کاربران مرورگرهای وزن 4 به پایین دارند .

5 تعداد کمی از مردم زمان زیادی را برای بارگذاری فایلها صرف می کنند .

همواره در طراحی وب نکات بالا را در نظر داشته باشید .

ساختار متناسب برای صفحه

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

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