Loading

Article

صبح ایرانی ، مجله نشاط و سرگرمی

مبانی طراحی وب سایت

کسانی که در حرفه طراحی وب سایت کار می کنند برای اینکه سایتهای خوبی داشته باشند باید با برخی از حقایق ضروری آشنا باشند. طراحی وب سایت شغلی است که به صورت مداوم تغییر می کند، اما با وجود این، شما با رعایت یکسری اصول ساده می توانید یک وب سایت خیلی خوب پیاده سازی نمایید.
اول از همه همیشه به یاد داشته باشید چیزی که شما از پروژه طراحی وب سایت می بینید متفاوت از دیگران است. زیرا شما آن را در مرورگر خودتان امتحان می نمایید. همانطور که شما می دانید کیفیت نمایش یک سایت وابسته به مرورگر مورد استفاده است؛ در نتیجه همیشه دیگران را در ذهن داشته باشید و پروژه طراحی سایت را در مرورگرهای مختلف تست نمایید.
یکی دیگر از عناصر مهم طراحی وب سایت، HTML آن می باشد. بسیاری از طراحان وب تصور می کنند که HTML فقط یک زبان توصیفی صفحه است در صورتیکه، یک زبان ساختاری نشانه گذاری است. بنابراین بسیاری کارشناسان طراحی وب سایت از HTML در راه اشتباه استفاده می کنند که این باعث می شود روی کل سایتشان تأثیر بگذارد.
گرافیک سایت نیز یکی از عوامل تأثیر گذار بر روی سایت است. اگرچه عوامل گرافیکی فریبنده و جذاب به نظر می رسند، اما معمولاً برای فروش موثر نیستند و در صورت استفاده زیاد ممکن است نتیجه برعکس ایجاد کند.
همچنین استفاده زیاد از عناصرهای گرافیکی سرعت لود سایت را کاهش می دهد و ممکن است ذهن بینندگان طراحی وب سایت را از هدف اصلی دور نماید. اگر لازم است که از عوامل گرافیکی استفاده کنید باید تصاویر مناسب انتخاب نمایید و سایز آنها را تا حد ممکن کوچک کنید. مهمترین نکته که در طراحی وب سایت باید به خاطر داشت محتوای سایت می باشد. زیرا یکی از فاکتورهای کلیدی در بهینه سازی سایت است و رتبه سایت را در موتورهای جستجو افزایش می دهد.
نسل جدید کاربران وب نسبت به نسل‌های گذشته، بیشتر جذب اطلاعات بصری می‌شوند. برای همین، صاحبان سایت‌ها تمایل دارند سایتی با گرافیک بالا داشته باشند. اما در طراحی اینگونه از سایت‌ها، علاوه بر اینکه می‌بایست به قوانین سئو توجه نمود باید طوری طراحی شود که برای کاربر جذاب باشد.
استفاده از فایل های چندرسانه ای و مالتی مدیا
مالتی مدیا در واقع از فایل های فلش ، ویدئو و کلیپ های صوتی و موسیقی تشکیل شده. توصیه ما به شما این است که از جریان مداوم رسانه ای یا Streaming Media استفاده کنید. فایل های جریان مداوم در واقع فایل هایی هستند که به صورت مداوم دریافت و توسط نرم افزارهایی مانند Real Player به کاربر نمایش داده میشوند. در این حالت کاربران منتظر نمی مانند تا کل فایل دریافت شود و سپس آن را مشاهده کنند بلکه عمل پخش همزمان با دریافت فایل صورت میگیرد.
در مورد فایل های چند رسانه ای یک مسئله دیگر نیز مهم است. برخی وب سایت ها در صفحه ورودی از فایل های اینترو فلش Intro Flash استفاده میکنند. حتما دقت کنید که به کاربر این امکان را بدهید تا در صورتی که مایل به مشاهده اینترو نبود بتواند با کلیک بر روی کلیدی از نمایش اینترو صرف نظر کند.

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

  • منوی سایت را در بالای صفحه قرار دهید زیرا کاربران برای دسترسی به صفحات اصلی، به آن نیاز دارند. اگر تعداد لینک‌ها کم بود از منوی افقی استفاده نمایید در غیر این صورت می‌توان از منوی عمودی استفاده نمود.
  • زیر منوها را به صورت فلش پیاده سازی نکنید تا موتورهای جستجو بتوانند آن را Crawl کنند.
  • از زیر منوهای سه سطحی خودداری کنید.
  • روی استراتژی لینک‌های داخلی خود کار کنید و فراموش نکنید در صورتیکه لینک مستقیمی از صفحه اصلی به صفحات مهم قرار دهید، نه تنها به سئوی سایت کمک می‌کنید بلکه نرخ تبدیل را افزایش می‌دهید.

انتخاب رنگ در طراحی سایت

  • همان طور که اطلاعات زیاد، اطلاعات را می‌کشد در مورد رنگ‌ها نیز این نکته صدق می‌کند. برای همین سه تا چهار رنگ اصلی را برای سایت خود انتخاب نمایید.
  • از یک رنگ متمایز برای لینک‌ها و تگ‌های H1 تا H6 استفاده نمایید.
  • یک رنگ مناسب برای محتوای سایت انتخاب نمایید، فقط در نظر داشته باشید که این رنگ نباید چشم کاربر را اذیت کند و از طرفی متمایز با رنگ بک گراند باشد.

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

  • از خودتان بپرسید که اگر اصرار به استفاده از یک فونت خاص و یا یک افکت خاص دارید، ارزش استفاده از یک فلش یا جاوا با زمان بارگیری زیاد را دارد یا خیر؟
  • اگر از فونت خاص و یا یک افکت خاص استفاده می‌کنید مطمئن شوید که روی سئوی سایت و استراتژی لینک‌های داخلی شما تأثیر نمی‌گذارد.
  • همیشه منوی HTML را جایگزین منوی فلش نمایید زیرا نه تنها به سئوی سایت کمک می‌کند بلکه تعداد صفحات ایندکس شده را افزایش می‌دهد.
  • به جای استفاده از پس زمینه های گرادینت و عکس بهتر است از چند دکمه زیبا و محتوای خیلی خوب استفاده نمایید.
  • هیچ گاه بازدیدکنندگان سایت را با تصاویر بیش از حد سردرگم نکنید.
  • برای تصاویر خود حتماً از تگ Alt استفاده کنید تا با استفاده از آن تصاویر را برای موتورهای جستجو بهینه نمایید.

عدم استفاده از فریم یا قاب در طراحی وب سایت
استفاده از فریم Frame در طراحی صفحات وب سایت کاملا منسوخ شده است و HTML5 نیز دیگر از این ویژگی پشتیبانی نمیکند. یکی از نکات منفی این نوع ویژگی عدم پشتیبانی از نشانه گذاری یا Bookmark است.
در نهایت به شما توصیه میکنیم همیشه در ابتدا شناخت مناسبی از مخاطبین سایت خود داشته باشید. مثلا اگر مخاطبین سایت شما کودکان هستند سعی کنید از رنگ های شاد و زنده بیشتر استفاده کنید. نوع و اندازه فونت نیز بسیار مهم است. مثلا اگر بازدیدکنندگان سایت شما افراد مسن هستند سعی کنید از فونت های ساده و با سایز نسبتا درشت استفاده کنید تا مطالعه آن برای افراد بازدیدکننده راحت باشد.
خب حال فرض کنیم شما تمام موارد بالا را در نظر دارید برای شروع می بایست به نکات زیر توجه کنید:
-نیازسنجی (مهمترین قسمت پروژه)
به این معنی که شما باید ببینید برای چه نوع شرکتی، سازمانی و یا تجارتی قصد طراحی وب سایت دارید. مسلما وب سایت یک ارگان دولتی با وب سایت نمایندگی شرکت X در ایران تفاوت های بسیاری خواهد داشت.در صورتیکه قرار است وب سایت فوق بصورت روزانه آپدیت شود مسلما باید برنامه نویسی دینامیک و دیتا بیس پشت سر آن باشد. اما اگر قرار است وب سایت فوق سالی ۲ بار آپدیت شود بهتر است طراحی بصورت استاتیک انجام گیرد.
نکته بسیار مهم : باید این نکته را بدانید که چیزی که باعث تداوم کسب و کار و رونق در آن میشود رضایت مشتری است. مطمئن باشید که بهترین مشتریان شما کسانی هستند که توسط مشتریان راضی شما به شما معرفی شده اند. از نقطه نظر بازاریابی بهترین نوع تبلیغ، تبلیغ دهان به دهان میباشد. پس سعی کنید که نیاز واقعی مشتری را پیدا نمایید و دقیقا  چیزی که احتیاج  دارد را برای او طراحی و آماده نمایید. به صرف اینکه تخصص شما برنامه نویسی asp.net میباشد نباید به تمام مشتریانتان پیشنهاد برای داشتن وب سایت دینامیک بدهید.
۲- ابزار سنجی
باید بدانید برای طراحی وب سایت فوق از چه نرم افزارها و یا برنامه ها و چه نوع زبان برنامه نویسی استفاده نمایید. برای شرکتی که کار آن تولید محصولات غدایی مخصوص کودکان است لازم است وب سایتی طراحی نمایید که در آن فلش بکار رفته باشد. شاید شما در طول این مرحله متوجه بشوید که برای ساخت وب سایت مورد نظر نیاز به برنامه نویسی میباشد که شما به آن آگاهی ندارید، اما کار خوب و تر تمیز را فدای نا آگاهی خود ننمایید. مطمئن باشی حتی اگر آن کار را انجام ندهید بهتر از این است که کار را خراب یا کاری که باب میل مشتری نباشد تحویل دهید. اما زمانی میرسد که شما دست رد به سینه هیچ کاری نخواهید زد. اشتباه نکنید، آن زمانی نیست  که شما به تمام زبانهای برنامه نویسی آگاهی پیدا کرده اید، آن زمانی است که دور شما پر است از برنامه نویسان و طراحان مجرب و با دانشی در تمام زمینه ها. مزیت این کار این است که اگر شما کارها را به خود محدود نمایید خیلی زود حجم زمانی کاری شما پر میشود اما میتوان کارها بصورت گروهی انجام داد. مطمئن باشی این روش بسیار بهتری است.
۳-تهیه Porposal
بعد از ۲ مرحله فوق نوبت به تهیه Proposal می رسد. بزرگترین مشکل مشتریان این است که دقیقا نمی دانند به چه نوع وب سایتی و با چه نوع شکل و شمایلی نیاز دارند. شما پس از بررسی کسب و کار و خواسته های مشتری با دادن یک Prposal به ایشان، او را در راه انتخاب خواسته اش کمک و یاری نموده اید.سعی کنید سایتهای مشابه کار او در سطح ایران و بین المللی برای او پیدا کنید و اجازه بدهید با دیدن وب سایتهای فوق دید و نگرش بازتری نسبت به قضیه پیدا کند. سعی کنید از قبل Proposal هایی برای کارهای مختلف از قبل آماده داشته باشید و برای هر پروژه فقط آنرا با توجه به خصوصیات آن پروژه خصوصی سازی نمایید .
۴-پیاده سازی و اجرای

بعد از عقد قرارداد نوبت به پیاده سازی کار میرسد که بیشتر صحبت ما در این قسمت و در باره نحوه ساخت اصولی قالب یا Template سایت میباشد. روشی که امروز برای شما قصد بازگو کردن دارم برای وب سایت شرکتهای تجاری( اعم از استاتیم و دینامیک) کاربرد دارد.
شما باید بدانید که قالب یک سایت با توجه به حجم کار و نیاز مشتری میتوانید شامل ۴ یا ۵ بخش و به شکل زیر باشد :
۱-Header
در این قسمت بنر سایت شما به همراه لوگو و sLogon(شعار شرکت) قرار خواهد گرفت
۲-Navigation Bar
لینک صفحات شما مانند : صفحه اصلی-خدمات-مشتریان-درباره-تماس و . . .  قرار میگیرد
۳-Slide Bar
در ابن قسمت هم میتواند لینک صفحات و تبلیغات کادر مخصوص Login و . . . قرار بگیرد
۴-Content Bar
در این قسمت توضیحات مربوط به هر صفحه قرار میگیرد
۵-Footer
اطالاعاتی در باره Copy Rights، قوانین استفاده از سایت،شرکت طراح و . . .  قرار میگیرد
نکته مهم : سایت با توجه به حجم اطلاعات میتواند دارای ۲ Navigation Bar باشد . اما اگر حجم صفحات و تعداد آنها  کم میباشد  از بین بخش ۲ و ۳ بهتر است ای یکی از آنها استفاده نمایید.یعنی Navigation Bar شما یا افقی باشد یا عمودی.
بعد از مشخص شدن اینکه لایه بندی سایت شما به چه ترتیبی خواهد بود می توانید 1 یا ۲ یا ۳ عدد قالب برای مشتری طراحی کنید. باید بدانید که لازم است قبل از شروع هر کاری در باره آن کار و ویژگیهای آن بطور کامل تحقیق و توسعه بعمل بیاورید تا از برگشتها و دوباره کاریها اجتناب نمایید .

افزودن دیدگاه جدید

عضویت درخبرنامه

با عضویت در خبرنامه شما از بروزرسانی محصولات ، خدمات ، اخبار و غیره مطلع خواهید شد

جدیدترین مطالب

4 ماه 4 روز قبل

وقتیکه گوگل در فوریه ی سال گذشته پروژه ی AMP یا صفحات موبایلی پرشتاب رو کلید زد، سر و صدای وب مسترها بلند شد که آیا به این...