25 نکته مهم و اصولی برای دیزاین وبسایت استاندارد و حرفه ای ( به زبان ساده )

طبیعتا برای ساخت یک وب سایت فقط کدنویسی و دانش آن لازم نیست …

ساخت یک وب سایت و یک دیزاین حرفه ای ترکیبی از کدنویسی , گرافیک , رنگ شناسی , بهینه سازی برای موتور جستجو و … می باشد . 

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

در این پست قصد دارم به به عنوان یک برنامه نویس کوچک از دنیای برنامه نویسان , اصول این کدنویسی و دیزاین رو آموزش بدم .

رعایت موارد زیر به استاندارد شدن و زیبایی هر چه تمامتر دیزاین شما کمک میکند …

شروع آموزش :

1 – دیزاین سایت را حدالمقدور  به استاندارد حال روز دنیا نزدیک نمایید یعنی دارای Header , Footer , Sidebar و NavBar باشد .رعایت این موارد بستگی به دیزاین شما دارد و این موارد به صورت استاندارد میباشد و میتوانید از 1 یا 2 تای آنها استفاده نکنید .

2 – از حداقل 1 و حداکثر 2 رنگ و در مواردی خاص از 3 رنگ برای دیزاین سایت استفاده نمایید . استفاده از تعداد رنگهای بالا باعث افت کیفیت دیزاین و سبک شدن دیزاین میشود . تقریبا از 3 رنگ برای موارد خاص مانند طراحی سایت های بچه گانه و شاد استفاده میشود . ضمنا سعی کنید از تو تونالیته ی رنگ ها استفاده کنید . یعنی اگر Base دیزاین را بر مبنای رنگ آبی میگذارید از آبی های با غلظت و روشنایی های بالا , متوسط و پایین استفاده نمایید .

 3 – سایت را بهینه برای تمامی مرورگرها بسازید . گرچه مرورگر IE در ورژنهای 8 به پایین بسیار اذیت کننده برای کدنویس ها میباشد اما بهتر است سایت طوری دیزاین شود که اگر قسمتی از کدنویسی ها  در IE های ورژن پایین قابل نمایش نیست , حداقل دیزاین سایت را بهم نزند و کاربر بتواند محتوای اصلی را بخواند .

4 – از موزیک ها و موزیک ویدیو های آنلاین به صورت AutoPlay در پشت صحنه ی سایت به هیچ عنوان استفاده نشود و حتما اگر استفاده میکنید , انتخاب اجرای موزیک یا موزیک ویدیو رو به خود کاربر بدهید .

5 – سایت ها یقینا دارای چندین صفحه میباشد . به هیج عنوان دیزاین صفحات را به صورت متفاوت انجام ندهید . یعنی کادر بندی و رنگ بندی ها در تمامی صفحات به صورت یکسان باشد تا به کاربر این اطمینان را بدهید که هنوز در همان سایت مربوطه هستید .

6 – تا حد امکان از درج بنر های متحرک و Alert ها و تبلیغات PopUp خسته کننده جاوا بپرهیزید . تجربه نشان داده که بیشترین اثرپذیری در تبلیغاتی وجود دارد که به صورت ثابت در سایت قرار میگیرند . دلیلش کامل روشن است , چون که کاربر فکر میکند تبلیغی که مشاهده میکند , بخشی از قسمت های سایت می باشد . 

7 – دیزاین سایت را تا جایی که امکان دارد با حجم پایین درست کنید و از پلاگین های Flash استفاده نکنید و حتما عکس های مورد استفاده در دیزاین را با استفاده از نرم افزار هایی مانند Optimize , PhotoShop کنید . 

8 – تا حدامکان از Iframe ها استفاده نکنید مگر در حالت بسیار ضروری و مورد نیاز .

9 – در Css3 ما امکان اضافه کردن فونت را داریم که به شخصه زیاد توی فونت های فارسی این کار رو انجام نمیدم ( به دلایل خاصی ) . سعی کنید از فونت استاندارد فارسی یعنی Tahoma استفاده کنید . ضمنا فونت ها در بازه ی 12px تا 16px باشد . برای عناوین از فونت های درشت در و برای پاراگراف ها از فونت های نازک تر ( ترجیحا 13px ) استفاده کنید . 

10 – همان طور که دوستان دیزاینر اطلاع دارند , استاندارد پهنای صفحات وب در حال حاضر 980px میباشد . اولا سعی کنید از 960px استفاده کنید ( به این دلیل که در موبایل و تبلت ها , نمایش به نحو احسنت خواهد بود ) , دوما حتما این 960px رو وسط چین قرار دهید ( قدیمتر در چپ و راست قرار میدادند ) .

توجه : شماره 10 برای سایت های عادی به کار میرود و برای سایت هایی با دیزاین Responsive ( قابل نمایش کامل و استاندارد در تمامی دستگاهها ) بلا استفاده میباشد .

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

12 – رنگ مهمترین قسمت هر سایت که عموما NavBar میباشد , دارای رنگی تقریبا گرم و کاملا یونیک و مجزا باشد .

13 – اگر از Java و یا Jquery در سایت استفاده میکنید , حتما فایل های شناسایی و Function های آنها را در پایین تمامی کد های صفحه قرار دهید تا بارگذاری سایت به نحو احسنت بالا و سریع باشد .

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

نکته : breadcrumb , چیزی شبیه به این را به شما تحویل میدهد . ( صفحه اصلی -> دانلود اسکریپت رایگان -> اسکریپت پشتیبانی آنلاین فارسی نسخه 2 )

15 – درج دکمه پرش به بالا که حتما در بسیاری از سایت ها مشاهده نموده اید میتواند بسیار کاربر پسند و مفید باشد . این دکمه یک پلاگین Jquery میباشد که با سرچ در اینترنت میتوانید به آن دسترسی پیدا کنید .

16 – رنگ لینک های سایت را تا حدامکان به همان رنگ آبی ( قابل فهم برای کاربر ) تغییر دهید و همچنین برای حالت های Hover , Active و Visited استایل خاص خود را بنویسید .

به عنوان مثال :

a:link {color:#0000FF;}      /* unvisited link */
a:visited {color:#00FF00;}   /* visited link */
a:hover {color:#FF00FF;}     /* mouse over link */
a:active {color:#0000FF;}    /* selected link */

 17 – در بسیاری از دیزاین ها , اسلاید شو هایی در صفحه اول به کار میرود که بسیار کار شیک و حرفه ای میباشد اما حتما رنگ عکس های به کار رفته در اسلاید شو با رنگ اصلی سایت باید همخوانی داشته باشد یا لااقل در تونالیته همان رنگ باشد .

18 – در رنگ پشت زمینه سایت ( BackGround ) از رنگ های مشکی و رنگ های گرم استفاده نکنید . به این دلیل که این رنگ ها سریعا چشم رو خسته میکنه و کاربر مجبور به بستن سایت میشود . 

19 – پشت زمینه باکس هایی که قرار است بر روی آنها مطالبی نوشته شود , بیشترین تضاد یا همان کنتراست رنگی را باهم داشته باشند . یعنی اگر رنگ نوشته مشکی است , پشت زمینه سفید و یا مثلا رنگ نوشته آبی پررنگ است , پشت زمینه آبی بسیار کم رنگ باشد . این کار به خوانایی نوشته بیشتر کمک میکند و چشم کاربر خسته نمیشود .

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

به عنوان مثال :

<a href="#" target="_blank"> <!--برای لینک های خروجی-->
<a href="#" target="_parent"> <!--برای لینک های داخلی -->

 21 – برای افکت دهی در سایت , تا جایی که امکان دارد از Css3 استفاده نشود و از Java و Jquery استفاده کنید . به این دلیل که Css3 در مرورگرهای قدیمی ساپورت نمیشود اما Java و Jquery در تمامی مرورگر های قدیمی و جدید قابل اجرا هست .

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

23 – از نوشته های متحرک در سایت و همچینین در عنوان سایت ( Title ) استفاده نکنید . 

24 – به جای استفاده از عکس در دیزاین ( مثلا برای منوها و یا هدر سایت ) از Css استفاده نمایید .

25 – و در آخر باز هم برمیگردیم به نکات ضروری در مورد رنگ ها که سعی کنید به جای استفاده از رنگ کاملا سفید در پشت زمینه سایت ( FFFFFF# ) از چند درجه تاریکتر آن مثلا ( EEEEEE# ) استفاده نمایید . چون رنگ کاملا سفید هم در دراز مدت , موجب خستگی چشم میشود .

پایان مطالب 

بیشترنکات بالا به صورت علمی و بعضی دیگر به صورت تجربی توسط اینجانب به دست آمده است .

گردآوری : وحید مجیدی 

 پخش اختصاصی