گروپ دیزاین | ارائه دهنده خدمات نوین

اصول طراحی وب

 ۹ اسفند ۱۳۹۴

حتما تا به حال اسم Html5 را زیاد شنیده اید و علاقه مند دانستن این هستید که Html5 چه فرقی با Html نسخه های قبلی دارد و مزیت Html5 در طراحی سایت چه چیزهایی است که طراحان وب سایت علاقه مند طراحی سایت با Html5 شده اند.

همانطور که میدانید Htmlیک زبان تحت کلاینت است که در طراحی سایت , بخش هایی که در معرض دید کاربران قرار دارد را با این زبان طراحی می کنند اما این زبان هم مانند سایر زبان های برنامه نویسی دست خوش تغییرات و دگرگونی بوده است و توانسته نسخه های جدید بسیاری را از خود منتشر کند و Html5هم آخرین نسخه از این زبان تحت کلاینت است که محبوبیت های بیشتری نسبت به سایر نسخه ها کسب کرده است و این محبوبیت ها را مدیون ظاهر Semantic خود است.

ساختار Semantic در Html5
<nav>در برگیرنده کدهای مربوط به منو است

<aside>دربرگیرنده کدهای ستون های کناریست

<header>سرصفحه پیج را شامل میشود

<footer>پاصفحه یا فوتر پیج را دربر دارد

<section>قسمت های ثابت در صفحه در این تگ قرار می گیرند

<article>قسمتی است که محتوی و مقالات در آن قرار میگیرد و غیر ثابت است

Html5 Semanc

کوتاه شدن کدها در Html5:
باتوجه به این که کدها در Html5 کوتاه تر و بهینه تر شده اند , خوانایی در کدها افزایش پیدا کرده است و همین موضوع توانسته کدخوانی را درHtml5 بالا ببرد.

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

وقتی قسمت های مختلف یک قالب طراحی سایت در Html5دسته بندی شده اند, به راحتی میتوان قسمت هدر و فوتر و قسمت های دیگر را به وضوح تشخیص داد و این تشخیص دادن یک نوع کدخوانی است .

Html5 کاملا سازگار با CSS3 است که توانسته است ظاهر زیبا تری را خلق کند و این نسخه زمانی که با CSS3ادغام میگردد مانند استفاده از Flash و Silver light عمل خواهد کرد.

فایل های Flashبرای اجرا شدن نیازمند adobe flash player در مرورگرها هستند که اگر در مرورگر کاربران این ابزار نصب نباشد نمیتوانند این فایل های فلش را تماشا کنند, و همینطور Silver light یک تکنولوژی است که از سمت شرکت مایکروسافت برای جایگزین کردن فایل های فلش راه اندازی شد که برای اعمال افکت های گرافیکی کاربرد داشت ولی در حقیت پروژه موفقی نبود و هیچگاه نتوانست رقیب جدی برای Flash محسوب شود.

قطعا برای طراحی سایت به جز تسلط بر کد نویسی و زبان های مطرح در این زمینه باید به قوانین و استاندارد های تعیین شده نیز توجه داشت. این موضوع باعث می گردد تا نمونه کار شما بسیار حرفه ای جلوه کند و تا مدت های زیادی ضرورتی برای اعمال تغییرات در آنچه طراحی کرده اید، وجود نداشته باشد. یکی از مواردی که افراد فعال در حوزه ی web design باید نسبت به آن آگاهی های لازم را داشته یاشند، اصول طراحی وب می باشد.
گام های اولیه قبل از اغاز کار که باید نسبت به آن توجه داشته باشید و برای آنها برنامه ریزی نمایید، عبارتند از :
– نیازسنجی اولیه بر اساس موضوع سایت
– تهیه طرح اولیه ( قالب یا تمپلیت گرافیکی )
– تعیین امکانات مودر نیاز و تکنولوژی های لازم برای پیاده سازی آن
– بررسی میزان نیاز به محتوا ( و میزان مطالب از قبل تهیه شده )
– آماده سازی قالب وب سایت و انتشار آن
-توسعه و رفع اشکالات و خطاهای احتمالی
چه مواردی به عنوان اصول طراحی وب در نظر گرفته می شوند؟
یک سایت به منظور افزایش ارتباط کاربران اینترنتی با صاحبان کسب و کار راه انداز ی می شود و هم چنین جنبه ی تبلیغاتی آن بر کسی پوشیده نیست. بنابراین باید تمامی مواردی که در حوزه ی جذب کاربران می تواند موثر باشد در طراحی رعایت گردد . برای مثال یک website باید کاملا مخاطب محور باشد بدین معنی که تمامی اجزای آن ائم از ساختار و قالب گرافیکی، رنگ های به کار برده شده، امکانات تعیین شده در صفحات وب و مظالب و محتوای به کار رفته در آن بر اساس نیاز کاربران تعیین گردد و به گونه ای باشد که برای بازدید کنندگان جذاب و در عین سادگی مفید باشد.
– سایت باید در تمامی مرورگر ها به خوبی نمایش داده شود ( از لحاظ محتوا، عناصر موجود در صفحه و … )
– رنگ های استفاده شده باید متناسب با موضوع باشد و به گونه ای نباشد که چشم را بیازارد و همواره تضاد رنگی مناسبی بین رنگ بک گراند، رنگ فونت های نوشته ها و سایر اجزای صفحه وب بر قرار شود.
– استفاده از فونت های خوانا و استاندارد و هم چنین عدم وجود غلط املایی موجب می گردد تا مطالب موجود در یک صفحه به راحتی و در تمامی مرورگرها و سیستم عامل ها قابل خواندن باشد.
– استفاده ی درست و مناسب از انواع محتوا در طراحی قالب سایت ( متن، تصاویر، انیمیشن و … )
– به Site Navigation توجه داشته باشید:
منو ها و اجزای وب سایت به گونه ای باشد که کاربر را هدایت کند، برای مثال در منو تمامی گزینه ها و بخش های مهم قرار داده شود تا یک بازدید کننده بتواند به راحتی از صفحات ارزشمند سایت که هدف نهایی شما را به کاربران منتقل می نمایند بازدید داشته باشد. برای مثال اگر یک فروشگاه آنلاین طراحی می کنید، محصولات باید دارای دسته بندی باشند و هم چنین پروسه ی خرید به گونه ای باشد که کاربر بتواند در کم ترین زمان خرید خود را انجام دهد.
– استفاده از نقشه ی وب سایت یکی دیگر از مواردی است که به عنوان راهنمای بازدید کنندگان برای مشاهده ی سایر قسمت ها به کار می رود . پس ضروری است که اهمیت sitemap را فراموش نکنید.
– در استفاده از بنرها و قرار دادن متون تبلیغاتی افراط نکنید، زیرا این موارد نیز هم چون متون طولانی موجب خسته شدن مراجعه کنندگان و در نهایت خروج آنها از آن صفحه می گردد.
– یکی دیگر از اصول طراحی وب سازگاری سایت با انواع گوشی های هوشمند و تبلت ها می باشد که موجب مشاهده صحیح یک webpage توسط بازدیدکنندگان می گردد.
– عدم استفاده از تصاویر با حجم زیاد ( موچب طولانی شدن زمان لود شدن صفحه می شود )
– رفع لینک های شکسته ی بدون مقصد در قسمت های مختلف صفحات وب ( لینک های سایت شما نباید کاربران را به صفحات خالی ارجاع دهد )

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

0 0 vote
Article Rating
مشترک ها
به من اطلاع بده
guest
0 Comments
Inline Feedbacks
View all comments
گفتگو از طریق واتس آپ