نکات مهم و کلیدی در طراحی سایت (بخش اول)

نکات مهم و کلیدی در طراحی سایت (بخش اول)
چکیده مقاله : انتشار : ۱۳۹۶/۰۹/۲۵ ۰ نظر ۸۷۱ بازدید

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

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

رنگ ها در وب:

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


براي به دست آوردن رنگ هاي مکمل از اين رنگ ها:
از ترکيب آبي و قرمز رنگ بنفش به دست مي آيد. بنفش روبروي زرد است پس :بنفش و زرد مکمل هم هستند.
از ترکيب زرد و آبي رنگ سبز به دست مي آيد.سبز مقابل قرمز است پس :سبز و قرمز مکمل يکديگرند.
واز ترکيب زرد وقرمز رنگ نارنجي به دست مي آيد.نارنجي مقابل آبي است پس :آبي و نارنجي مکمل يکديگرند.


شرح ترکيب رنگ ها در آدرس زير:

www.webdesignref.com/examples/rgbcolor.htm


رنگ ها در وب بر اساس RGB(Red+Green+Blue) تعريف مي شوند. و در مبناي 16 ترکيب رنگ به شکل کد هگز 6 رقمي تعريف مي شود که 2 رقم اول براي قرمز،2 رقم دوم براي سبز و 2 رقم آخر براي رنگ آبي مي باشد.


مثال: #008000 يعني سبز .#0000ff يعني آبي . #800080 ارغواني

صفحه وبي که 512 رنگ مجاز را نمايش ميدهد.

نکته: براي متن ها از رنگ هاي واضح و متضاد زمينه استفاده کنيد.متن ها بايد به راحتي و شفاف قابل خواندن باشند.به طور مثال در زمينه مشکي از رنگ توسي براي متن استفاده نکنيد.

نکاتي براي تصاوير:

براي تصاوير حتما تگ alt بگذاريد.

”

نکته: خصوصيت alt در تگ img براي شناسايي صفحات توسط موتور جستجو بسيار موثر است.
حجم تصاويررا تا جاي ممکن کم کنيد
پس از آماده کردن تصويرتان ،براي قرار دادن آن در فضاي اينترنت بايد حجم آن را تا حد ممکن کم کنيد.
محبوب ترين نرم افزار براي اين کار فتوشاپ است .براي اين کار
پس از آماده شدن تصوير :از منوي فايل گزينه save for web & Devices رو انتخاب کنيد:

تنظيمات مورد نياز مانند کيفيت تصوير،تعداد رنگ ها و... را انجام دهيد.
انتخاب خاصيت Progressive براي تصاوير JPEG و خاصيت Interlaced باعث مي شود تا بارگذلري تصوير،از حالت محو به حالت وضوح انجام شود و در صورتي که از اين حالت ها استفاده نکنيد تصوير به شکل پله پله ظاهر مي شود.
نکته: عکس ها را با پسوند jpg و اشکال را با پسوند gif ذخيره کنيد.
اگر عکس شما داراي تعداد رنگهاي کمي است و مرز بين اين رنگها مشخص مي باشداز فرمت Gif استفاده کنيد و اگردر عکس از رنگهاي زيادي استفاده شده و اين رنگهادر هم محو شده باشند از فرمت Jpg استفاده کنيد.


يکي از موارد زيبا براي نمايش لينک ها حالتي است که با رفتن موس بر روي لينک، رنگ آن عوض شود: با اين روش مي توان رنگ ستون هاي جداول و Divرا در زمان رويداد mouseOver تغيير داد .
کد جاواي اين حالت:


و کد براي تغيير تصوير:

سرعت بارگذاري سايت بسيار مهم است،کاربران از سايت هاي کند بازديد نمي کنند.اگر در طراحي از تصاوير استفاده مي کنيد،بايد تا جاي ممکن از حجم تصاوير بکاهيد. وسپس از روش هاي تکرار تصاوير استفاده کنيد:


در اينجا ما اين تصوير را با استفاده از Css به شکل افقي تکرار کرده ايم.

.BackMP

{

background-image: url(image/scrolP.jpg);

background-repeat: repeat-x;

WIDTH: 850px; height: 74px;

}

و نتيجه:



نکته : در سايت هاي استاتيک براي نمايش تصاويربا حجم زيادتر ،از تگ lowsrc قرار دهيد:
به اين شکل که يک نمونه از تصوير با وضوح پايين را در تگ lowsrc قرار دهيد و مسير تصوير اصلي (با اندازه بزرگتر) را در src قرار دهيد.به اين شکل، تا زماني که تصوير بزرگتر بارگزاري شود،تصوير کوچک تر نمايش داده مي شود.


برخي از قوانين و قراردادهاي رايج وب:

  • 1.صفحه اول سايت را متفاوت از صفحات ديگر ايجاد کنيد.
  • 2.آرم در بالاي صفحه سايت علامت بازگشت به صفحه خانگي است.
  • 3.پيوندهاي متني در پايين صفحه تکرار شوند.
  • 4.در صفحات با متن زياد ،در پايين صفحه لينک به بالاي صفحه قرار دهيد.
  • 5. براي صفحاتي که زياد چاپ مي شوند،فرم مخصوص چاپ قرار دهيد.
  • 6.از URL هاي ساده و قابل به خاطر سپاري استفاده کنيد تا هدايت بهتر شود.
  • 7.پهناي صفحات خود را در اندازه اي طراحي کنيد که نياز به پيمايش افقي صفحه نباشد.


پايان بخش اول.

دوستانی که این مقاله را مطالعه کرده اند، از دوره های آموزشی زیر نیز استقبال کرده اند:

دوستانی که این مقاله را مطالعه کرده اند، از مقالات زیر نیز استقبال کرده اند:

نظرات

به این مقاله امتیاز دهید

۰ نفر (امتیاز مقاله ۰)