آموزش متدولوژی و روش طراحی وب سایت گام به گام

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

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

سالها مذاکرات زیادی درباره اینکه چه ابزارهای خاصی در فرایند گسترش وب استفاده میشود، وجود داشت. به هر جهت امروزه خیلی از ابزارهای ویرایشگر وب در رده های چهارم و پنجم قرار گرفتند. این مذاکرات بیشتر پیرامون آن بود که طراحان وب از کدام ابزارها استفاده کنند
بطور ایده آل ترکیب کدهای دستی و WYSIWYG بهترین گزینه از نقطه نظر توسعه امروزی است. انجام این عمل ساده زمان زیادی برای توسعه یک سایت HTML با کد نویسی را میگیرد. احتیاجات به روز رسانی اطلاعات مستلزم آن است که بین صفحه وب و یک سایت محلی اتحاد و پیوستگی ایجاد شود. امروزه WYSIWYG از استاندارد خارج شده است.
و از Dream Wearer , Front Page استفاده میشود. در آینده میتوانید تشکیلات خود را به آخرین درجه پیشرفت برسانیدو همواره با زمان جلو روید.
ولی وب یک رسانه خطی نیست و به همین سبب خواص متفاوت تری دارد و هنگامی که در داد و ستد از آن به عنوان یک قالب خطی استفاده شود خواص متفاوتی از خود بروز میدهد. بیشترین ویژگی متفاوت وب در برقراری ارتباط دو طرفه با کاربران میباشد. صنعت چاپ نمیتواند مشاهدات کاربران را بصورت فرم تخصصی در آورد. ودر یک جمله دیگرمیتوان گفت رسانه وب میتواند امکانات ارتباط دو طرفه را به بهترین صورت انجام دهد و برای کاربر فرم شخصی ایجاد کند. و این پدیده یک ارتباط مستقیم بین تجار و کاربران(خریداران) را برقرار می کند .در طی این دوره شما از ابزارهای زیادی در توسعه صفحات وب بهره خواهید گرفت اما توجه داشته باشید که هدف از این دوره کامل کردن مهارت شما در تمامی این زمینه ها بصورت حرفه ای نیست بلکه هدف از این دوره آگاهی شما از امکاناتی است که هر کدام از این ابزارها به شما میدهند و این شما هستید که در نهایت تصمیم گیرنده اصلی خواهید بود که کدام ابزار فواید بیشتری برای نظام مند شدن مقاصدتان دارد.

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

حدس می زنید که چه مقدار از متن صفحه وب شما به طور واقعی توسط کاربر خوانده می شود ؟ تمام آن ؟ بیشتر آن ؟ حقیقت آن است که کابران اغلب هیچ مقداری از آن را نمی خوانند . به دنبال این جمله باید گفت که در حدود ۸۰% از مردم فقط در مندرجات سایت پویش می کنند و به دنبال نکات و عبارات کلیدی می گردند . به طور متوسط ۲۵ % کاربرای در خواندن روی مانیتور نسبت به خواندن از روی چاپ آهسته تر عمل می کنند . بنابراین ،این واقعیت چگونه بر ساختار صفحه شما اثر می گذارد ؟ به عنوان یک طرح شما باید صفحه ای ایجاد کنید که کاربران بتوانند سریع آن را کاوش کرده و اطلاعات مطالبه کرده را پیدا کنند.
بخاطر آورید که یکی از تناقضات در طراحی وب این است که تصور کنید که وب فرم دیگری از رسانه چاپ است . هنگامی که طرح یک صفحه با مندرجات مشابه به یک مجله و یا بروشور ایجاد می کنید کاربران به طور مسلم به سایت دیگری خواهد رفت چراکه شما در نظر نگرفتید که ماهیت مطالب بر روی وب باید با دیگر رسانه ها به خصوص چاپ متفاوت باشد.هنگامی که کاربران به سایت شما می رسند اولین حسی که درآنها ایجاد می شود از اهمیت زیادی برخوردار است.
مثلا ممکن است سایت وب شما که به قصد تجارت ایجاد شده است فقط یک پنجره داشته باشد ولی به هر حال اگر به نظر مشتری غیر جذاب باشد شما مشتری خود را به رقیب خود واگذار کردید. بنابراین اگر بدانید که بازدید کنندگان فقط سایت شما را مرور می کنند متوجه خواهید شد که چرا نباید کاربران را مجبور به خواندن مطالبی کنید که برای آنها جالب نیست . کاربران را راضی نگه دارید و آنچه را که می خواهند به آنها عطا کنید، حتما آنها به سایت شما باز خواهند گشت .(قابل ذکر است قواعد بازار یابی در سایتهای تجاری متفاوت تر از دنیای واقعی می باشد)
کاربران نمی خواهند که صفحات در هم و نا مربوط را ببینند و از طرفی محتویات و مندرجات سایت نیز ضروری است پس با این وجود ساختار و انتشار آن هر دو با هم از اهمیت برخوردار هستند.
معمولا کاربران سایت شما را برای اطلاعات ویژه ای که در مورد جستجو و یا خرید و … می خواهند بازدید می کنند.
هر چقدر این عمل برای آنها آسانتر باشد، کارشان را راحت و سریعتر انجام میدهند. کاربران وب فقط علاقه مند به آنچه که می خواهند بیابند هستند . کسانی که در کارهای تجارت خرده و جزئی هستند اعتقاد بر این دارند که مشتری ها خود خواه هستند ، ولی آنها می دانند که پرداخت صورتحساب است که درهای تجارت را باز نگه می دارد و اگر شما این نکته را درک کنید صفحه ای بوجود خواهید آورد که ساختار آن اهداف تجاری کاربران را تامین کند.
سایتی نظیر سایت http://www.cnn.com را در نظر بگیرید . به محض ورود به سایت سریعا می توانید مرور کلی از کل سایت داشته باشید و یا به عبارت دیگر شما می توانید کل سایت را با نگاه از یک عبارت به عبارت بعدی مرور کنید و آنچه را که بخواهید خیلی سریع بدست آورید . بنابراین تمایل به دیدن مجدد سایت رادارید .سایت فوق از نمونه سایت های موفق در جهان می باشد. یا همین سایت میکرورایانه خیلی ساده و جالب بود صفحه اول سایت بسیار ساده است و طراح سایت انگار رسما بلندگو در دست گرفته و جار می زند که در این سایت اینها را خواهید دید کلیت سایت در همان صفحه اول برای همه جار زده می شود . اگر کمی گرافیک و زیبایی به آن اضافه شود بسیار خوب خواهد بود.

● ارزیابی و تمرین مهارتهای خود

قبل از آنکه بحث را ادامه دهیم لازم است ارزیابی از مهارتهای html خود به دست آورید:

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

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

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

در این تمرین شما یک صفحه وب ساده ایجاد خواهید کرد و توانایی HTML خود را محک میزنید.
– از الگوی HTML برای ایجاد قالبهای زیر استفاده کنید.
– Table
– Hyper Link ( استفاده از پروتکل HTTP)
– Font
– Image

واقعیت در طراحی وب (کاربران ایرانی)

یک طراح وب باید برای فن آوری جدید و اینکه چگونه از ابزارها در طراحی استفاده کند آماده باشد و معمولا طراحان جدیدترین سخت افزارها و نرم افزارها را به کار می گیرند . به هر جهت این انگیزه ایجاد می شود که شما باید صفحات دو طرفه دینامیکی ایجاد کنید که نرم افزارهای جدید و قدیم را حمایت کنند.
اکثریت استفاده کنندگان وب به جستجوی طراحی عالی و پیشرفته نیستند ولی استثنائاتی همیشه در این قواعد وجود دارند . به هر جهت یک راهنمای خوب در هنگام طراحی وجود دارد که به قرار زیر است:
۱) بیشتر کاربران از مانیتورهای ۱۷ Inch یا کمتر استفاده می کنند.
۲) بیشتر کاربران با تنظیم تفکیک پذیری ۶۰۰*۸۰۰ کار می کنند.
۳) بیشتر کاربران دارای مودم های با سرعت ۵۶k هستند.
۴) اغلب کاربران مرورگرهای ورژن پایین دارند .
۵) تعداد کمی از مردم زمان زیادی را برای بارگذاری فایلها صرف می کنند.
همواره در طراحی وب نکات کلی بالا را در نظر داشته باشید.

● المانهای طرح بندی یک صفحه

قبل از شروع به ساختن صفحه یک دید کلی و ساختار کلی از سایت را در نظر بگیرید . شما باید المانهای صفحه و نیز چگونگی فعل و انفعالاتی که آنها با هم دارند را بدانید . از نقطه نگاه بصری باید المانهای انتخابی را در داخل سایت ایجاد کنید که این المانها عبارتند از طرح ، رنگ ، نوع قلم ، تصاویر و چند رسانه ای ها و … طرح صفحه منوط به آن است که طراح بتواند اطلاعات خود را به کاربر نشان دهد این نوع قالب بندی باید برای درک آسان تر اطلاعات باشد مثل اسناد و گزارشها . این نوع ساختار به دسته بندی و ساده کردن ، ویرایش و توزیع و پخش اطلاعات کمک می کند به عنوان یک طراح وب باید ساختار خود را توسعه دهید ودر این مرحله تجربیات کاربران می تواند برای شما بسیار مفید واقع شود.
موارد زیر را در هنگام طراحی یک صفحه در نظر بگیرید :
۱) Frameset اجازه می دهد که صفحات چند گانه شما بصورت واحد ظاهر شود.
۲) Margin کنترل می کند که مطالب چگونه و با چه فاصله ای از کادر مانیتور شروع شوند.
۳) Border برای Frame ها و جداول HTML استفاده می شود.
۴) رنگ ایجاد یک احساس گیرا و کلی از ساختار سایت و باعث ازدیاد توانایی خواندن میشود .
۵) Space جدا کردن المانهای صفحه
۶) Navigation برای کنترل کاربران برای حرکت در سایت
۷) Rule مندرجات صفحه را به قسمتهای جداگانه و وابسته قسمت می کند.
۸) White Space باعث کم تر کردن بی نظمی المانهای صفحه می گردد.
۹) Table توزیع المانهای صفحه در جاهای مختلف صفحه و شکل دادن اطلاعات در ستونهای مخفی
۱۰) Lists به طراح اجازه می دهد تا اقلام را سازماندهی کنیم.
۱۱) Paragraph گروهی از کاراکترهای متنی در صفحه می باشد.
۱۲) Heading level ایجاد سایزهای گوناگون از متن و طراحی و سازماندهی آن.
۱۳) Image مورد استفاده در ایجاد جاذبه ابعادی ، اطلاعات ، Navigation
تعیین کنید که سایت شما کدامیک از این عوامل را در بر دارد و شما را در روند توسعه یاری می دهد و اگر به این عوامل پرداخته نشود به تدریج منابع و نیرو ها و زمان خود را از دست خواهید داد.

● طرح معمول صفحه

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

● سرعت و سایز صفحات (اسکرول کردن)

کاربران خواهان سرعت زیاد هستند . شما این خواسته آنها رامی توانید با طراحی صفحاتی با سایزهای محدود فایلها می توانید تامین کنید . با ۱۰ ثانیه مکث در سایت، کاربران از سایت شما بریده خواهد شد و توجه آنها به سایت را از دست خواهید و این نکته بدان معنی است که طراح وب باید از عکسهای مقرون به صرفه استفاده کند و انتخاب فایل ها باید با دقت زیادی همراه باشد . بهینه سازی عکسها عامل مهمی در بارگذاری سریعتر آنهااست که بعدا به جزئیات آن می پردازیم.
سایز صفحه به معنای سایز تمام فایلها و المانهای بکار برده شده در صفحه شامل فایلهای HTML و تمامی عناصر تعبیه شده ( jpg , gif ) می باشد.
توجه داشته باشید که ۱ ثانیه عکس العمل به کاربران این اجازه را می دهد که آنها حس کنند که به طور آزاد و راحت در میان اطلاعات جابه جا می شوند ولی زمان ۱۰ ثانیه نیازدارد که به توجه کاربر به سایت پرداخته شود . در اواسط سال ۱۹۹۷ مطالعات نشان می داد که متوسط سایز یک صفحه وب ۴۴ کیلو بایت است یعنی طبق جدول ۵ برابر بیشتر از زمان معمول واکنش برای کاربرانی که از ISDN استفاده می کنند . بنابراین برای بیشتر کاربرانی که از پهنای باند متوسط استفاده می کنند سرعت بارگذاری بسیار کم خواهد بود . همچنین توجه داشته باشید که ۴۴ kb ، ۳۰ درصد بیشتر از بزرگترین حد سایز برای کاربران استفاده کننده از مودم خواهد بود.
دانستن چنین مطالعاتی شما را به سمت توسعه وب متمایل می کند تا جایی که کامپیوترها و ارتباطات آنها با یکدیگر سریع تر شود . خیلی از وب سایت های خارجی که منتشر شده صفحات کوچکی هستند که از عکسهای کم مصرف در آن استفاده شده است.

منبع: میکرو رایانه