طراحی وب سایت

seo

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

7 گام اساسی برای طراحی سایت

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

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

چکونه یک وب سایت بسازیم

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

1

ایجاد طرح کلی پروژه

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

قبل از شروع به فکر کردن راجع به گالری ویدئو و یا یک کلید فانتزی برای اجرای برنامه از خودتان این چهار سوال را بپرسید:

1- چه نوع برندی می خواهید برای خود ایجاد کنید. قلم و کاغذ بردارید و خصوصیات و ویژگی های برند خود را توصیف کنید.

2- راه موفقیت چیست؟ می خواهید کالا بفروش برسانید؟ یک برند ایجاد کنید و یا فقط برای سرگرمی اینکار را می خواهید؟

3- به چه ویژگی هایی نیاز دارید؟ و آیا اینکه پلتفرم انتخابی شما (گام دوم) قادر به ایجاد ویژگی های مورد نظر شما است؟

4- سایت شما برای چه کسانی است؟ به مخاطبان آینده خود فکر کنید. آنها بدنبال چه می گردند.

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

با این پروسه شما از رفتن به راه اشتباه مصون خواهید ماند.

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

2

انتخاب پلتفرم طراحی

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

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

3

طرح صفحه نخست و استایل منو

بعد از اینکه پلتفرم خود را برای طراحی سایت انتخاب کردید زمان تمرکز بر روی طرح صفحه خانه و منوی سایت است. 

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

طرح صفحه نخست

صفحه خانگی از به بخش تقسیم می شود. بالا و پایین صفحه نمایشگر و شما باید برای هر قسمت آن تصمیم بگیرید که چه طرحی را پیاده سازی کنید. قسمت بالایی صفحه نمایش اولین بخشی است که بازدیدکننده سایت می بیند و بیشترین تاثیر را برای روی کاربر سایت دارد. همین جاست که کاربر تصمیم می گیرد که از سایت برود و یا اینکه به قسمت پایین صفحه اسکرول کند.
 بخش بالایی صفحه (Above the fold) : نیمه بالایی صفحه خانگی باید شامل مهمترین مطلب درباره سایت باشد زیرا کاربر لازم نیست به پایین صفحه اسکرول کند تا مطلب را ببیند. در این قسمت می توانید متن خلاصه در مورد سایت یا شعار سایت بصورت برجسته و دگمه اجرای برنامه (Call to action) باشد که لینک دریافت خبرنامه سایت را شامل شود بگذارید.
بخش پایین صفحه (Below the fold) : در نیمه پایینی باید مطالبی قرار بگیرد که به نحوی با نیمه بالایی در ارتباط باشد . شامل توضیحات جامع تر در مورد محتوی سایت باشد. در این قسمت باید کاربر را قانع کنید که در سایت شما بماند و اعتماد او را جلب کنید. می توانید نظرات کاربران را در اینجا قرار دهید.
مطالب سایت شما نباید زیاد پیچیده و شلوغ باشد که باعث سردرگمی مخاطب شود.

 لوگوی سایت

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

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

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

4

انتخاب تم و الگو

برای اجرای طراحی صفحه نخست ابتدا باید یک تم یا الگو انتخاب کنید

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

اکثر تم ها دارای نسخه های رایگان و پولی می باشند. که می توانید با توجه به نیاز خود آنها را ویرایش و سفارشی سازی کنید. البته در بعضی از نسخه های پولی امکان سفارشی سازی ویژگی های آن وجود ندارد بنابر این ابتدا پیش نمایش آن را ببینید.

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

بهترین انتخاب می تواند شامل هدر با عکس ثابت به همراه متن باشند. عناصر اصلی در قسمت بالایی سایت می تواند شامل : عنوان سایت ، پاراگراف اصلی ، لینک که می تواند بصورت یک دگمه یا متن باشد و کاربر را به بخش مهم از سایت ارجاع دهد ( خبرنامه یا لینک به محصولات ) و تصویر اصلی باشد.

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

5

انتخاب ترکیب رنگ

بررسی ها نشان می دهد که رنگ دلیل اصلی 85 درصد از خریداران برای انتخاب یک محصول است

بنابراین انتخاب ترکیب رنگ برای سایت قدم مهمی در طراحی سایت است. این مقاله به شما کمک می کند تا استراتژی مناسبی برای انتخاب رنگ سایت بکار بگیرید. این استراتژی شامل سه نکته اساسی می باشد:

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

6

محتوی : فونت ، تصویر و متن

قانون طلایی انتخاب فونت این است که خوانایی را فدای استایل نکنید. فونت زیبا وقتی که قابل خواندن نباشد ارزشی ندارد.

به مانند طرح رنگ از فونت یکسان برای تمام سایت استفاده کنید. مطمئن شوید که عناوین تمام صفحات دارای فونت مشابه باشند. اساس تایپوگرافی شامل موارد زیر است:

 از بیش از دو نوع فونت متفاوت در سایت استفاده نکنید و برای رنگ فونت هم از همین قانون پیروی کنید.

همچون رنگ ها فونت نیز وزن سایت شما را مشخص می کند. فاصله بین خطوط و متون را نیز رعایت کنید. معمولا ارتفاع خط 150% سایز فونت درنظر گرفته می شود.

طراجی لوگو

محتوای سایت باید بازدید کننده سایت را ترغیب به ماندن و مطالعه مطلب نماید.

نثر خود را زیبا و چسم نواز بنویسید و فقط به نوشتن مطالب طولانی بسنده نکنید. اگر می خواهید متنی بیشتر جلب توجه کند از فضای خالی استفاده کنید و همیشه سئو و بهینه سازی مطلب را در نظر داشته باشید تا ترافیک بیشتری برای سایت خود از طرف گوگل بگیرید. مهمترین بخش سئو نوشتن متون هدف دار است. از کلمات کلیدی مناسب در مطلب خود استفاده کنید و از وب سایت هایی که کلمات کلیدی را تجزیه و تحلیل می کنند بهره بگیرید. از Google Trend می توانید برای بررسی کلمات کلیدی استفاده کنید. کلمات کلیدی را در تگ های H1 و H2 ، متن سایت ، توضیحات (meta description) و عنوان سایت (title) قرار دهید.

از Schema Markup برای اضافه کردن اطلاعات تماس استفاده کنید تا در جستجوهای منطقه ای توسط گوگل پیدا شوید. درصورتی که با کدنویسی آشنا نیستید نگران نباشد scheme generator می تواند کد مناسب را بصورت آنلاین برای شما ایجاد کند.

و در آخر سعی کنید نکات دستوری و املایی را در نوشته های خود رعایت کنید. سعی کنید ساده و واضح بنویسید بجای اینکه به کلمات کلیدی و سئو فکر کنید.

تصویر سایت شما را از یک وب سایت ساده به سایت چشم نواز تبدیل می کند.

بنابر مطالعات انجام شده درصورتی که ما مطلبی را بشنویم تنها 10% آن را به خاطر می سپاریم اما به اضافه کردن تصویر بصورت خارق العاده ای این میزان به 65% افرایش می یابد. تصاویر باعث افزایش کلیک و ماندن در وب سایت می شود.

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

7

تست ، انتشار و بروز رسانی

قدم هفتم بعد انجام مراحل طراحی صفحه نخست ، انتخاب فونت ، رنگ  و قالب سایت انتشار وب سایت است.

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

 سایت را بطور مرتب به روز رسانی کنید.

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

زمانی که سایت را به روز رسانی می کنید توجه داشته باشید که مطالب شامل تصاویر ، اطلاعات محصولات و متن به روز باشند. مروز مطالب ساده و قابل فهم باشند. و دکمه (Call to action) CTA در روی صفحه جای ثابتی داشته و رنگ و فونت آن گیرا باشد.