آموزش ترکیب تمپلیت های مختلف وب سایت در طراحی

آموزش ترکیب تمپلیت های مختلف وب سایت در طراحی – مدرس سید حسام زنوزی

 

قالب سایت چیست و چگونه طراحی می شود؟

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

برای طراحی قالب سایت نیاز به دانش برنامه نویسی به زبان های Html ،Java ،Css ،Php و… است
که، با توجه به امکانات مورد نیاز هر کدام از زبان های برنامه نویسی به کار می روند. با جستجویی در وب
هزاران قالب متناسب با سایت خود را خواهید یافت. هر کدام از این قالب ها را می توان به صورت دلخواه،
شخصی سازی کرد و از امکانات آن بهره برد.

قالب وب سایت

تاثیرات قالب سایت

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

• استفاده بهینه از HTML5

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

• UX و UI مناسب

یکی دیگر از راه های موفقیت استفاده از روان شناسی های رنگ خواهد بود که متاسفانه معمولا در کشور ما رعایت نمی شود و مورد توجه قرار نمی گیرد و می توانید جهت بررسی رنگ سایت
خود از سایت Checkmycolours استفاده کنید.

تاثیرات قالب وب سایت

• طراحی قالب بدون خطا

طراحی قالب سایت باید طبق فرمت Xhtml انجام شود و خطای کدنویسی از نظر مکان باز و بسته شدن Tagها و همچنین نحوه استفاده از دستورات Html نداشته باشد. این موضوع از نظر گوگل بسیار مهم است و در صورتی که قالب شد مشکلات ساختاری داشته باشد حتی اگر این مشکلات در مرورگرهای اینترنتی خود را نشان ندهند در بالا آمدن سایت شما در گوگل تاثیر منفی خواهد گذاشت. یکی از راه های ساده برای تشخیص بخش های خطای قالب استفاده از مرورگر فایرفاکس و گزینه View Page Source است، فایرفاکس بخش هایی از صفحات سایت شما را که مشکل کدنویسی دارند با رنگ قرمز مشخص می کند.

• کدنویسی قالب بدون استفاده از جدول

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

تاثیرات قالب وب سایت

• استفاده بهینه از Css و جاوا اسکریپت

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

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

• ایجاد معماری مناسب سایت در قالب

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

تاثیرات قالب وب سایت

• استفاده از تگ های با اهمیت در بهینه سازی سایت

برخی از مشخصات سئو داخلی سایت استفاده از تگ های پر اهمیت در سئو در داخل محتوای سایت و قالب آن است. به عنوان مثال H1 مشخص کننده عنوان صفحه است و هر صفحه تنها باید یک عنوان داشته باشد لذا یک تگ H1 در هر صفحه باید باشد. استفاده از تگ های H2 و… نیز می تواند برای عناوین سطح دوم به بعد مفید باشد. در صورتی که از تصاویر در صفحه استفاده می شود حتما باید خصوصیت alt را در آنها قرار داد یا اینکه از تصاویر به صورت استایل استفاده شود. طراحی قالب سایت با فرمت Html5 می تواند یک مزیت برای بهینه سازی سایت باشد.

• طراحی قالب اختصاصی یا آماده؟

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

تاثیرات قالب وب سایت

روش های جدید طراحی سایت

 

⇐ طراحی نسخه موبایلی سایت

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

⇐ تبلیغات کلیکی پیشرفته

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

⇐ طراحی دو بعدی تصاویر

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

روش های جدید طراحی سایت

⇐ استفاده کردن بیشتر از فایل های مدیا در سایت

بدلیل بالارفتن سرعت اینترنت و توانایی پشتیبانی مرورگر ها گذاشتن فایل های رسانه مثل تصاویر, ویدیو و… می توانید به جز استفاده از مطالب متنی از مدیا هم در داخل مطالب
سایت خود استفاده کنید. برای افراد مطالب نمایشی بسیار جذاب تر است.

⇐ بهینه سازی سایت

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

آموزش ترکیب تمپلیت های مختلف وب سایت در طراحی

تئوری رنگ ها در طراحی قالب سایت

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

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

رنگ های ثانویه به ترکیب دو رنگ از رنگ های اصلی گفته می شود که در مثلث یاد شده مجاور
هم هستند. به طور کلی در یک شکل بندی مشخص می تواند رنگ های نارنجی، سبز و ارغوانی
را از دسته رنگ های ثانویه محسوب کرد. البته این ترتیب می تواند تغییر کند و بستگی به مثلث
اولیه تشکیل شده با رنگ های اصلی دارد.

مقالات مرتبط: نکات لازم جهت انتخاب تمپلیت (اندازه واقعی)

 

نمونه کارها

 

[instagram-feed]