ورود به سایت

ثبت نام در سایت

Registration confirmation will be e-mailed to you.

فراموشی رمز

بستن
بستن

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

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

آموزش برنامه ریزی یک وب سایت

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

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

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

مطالب مرتبط


گام 1 - ایجاد ساختار اساسی

ایجاد ساختار اساسی

1-عملکرد سایت را تعیین کنید.

اگر سایت را برای خود درست می کنید ، احتمالاً جواب این موضوع را می دانید.

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

هر آنچه را که در اینجا تصمیم می گیرید ، روی وب سایت نهایی تأثیر خواهد گذاشت.

نکته1: آیا به یک فروشگاه فروشی احتیاج دارد؟ آیا به نظرات کاربران نیاز دارید؟

آیا کاربران نیاز به ایجاد حساب کاربری دارند؟ آیا این مقاله محور است؟ تصویر گرا؟

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

نکته2: این می تواند یک فرآیند ترسیم شده باشد،به خصوص برای شرکت های بزرگتر که افراد زیادی در این پروژه درگیر هستند.

ایجاد ساختار اساسی

2-یک نقشه برای سایت ایجاد کنید.

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

شما حتی در این مرحله به صفحات احتیاج ندارید،فقط یک جریان کلی از مفاهیم.

برای ایجاد نمودار می توانید از یک برنامه رایانه ای استفاده کنید،یا آن را خودتان روی یک کاغذ بکشید.

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

ایجاد ساختار اساسی

3-چند کارت را امتحان کنید.

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

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

آیا تیم شما کارت‌ها را به شیوه‌ای سازماندهی می‌کند که به نظر آن‌ها بسیار مفید است.

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

ایجاد ساختار اساسی

4-از کاغذ و تابلوی اعلانات یا تخته سفید استفاده کنید.

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

طرح را روی قطعات کاغذ رسم کنید و آن‌ها را با نخ به هم متصل کنید, یا طرح کلی را بر روی یک تخته وایت‌برد رسم کنید.

برای جلسات طوفان فکری عالی است.

ایجاد ساختار اساسی

5-یک فهرست محتوی بردارید.

این بیشتر از سایتهای جدید نسبت به طراحی مجدد طراحی شده است.

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

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

این به ساده تر شدن روند طراحی مجدد کمک خواهد کرد.

گام 2 - ساخت یک Wireframe HTML

ساخت یک Wireframe HTML

1-برای کمک به تحکیم سلسله مراتب ، یک قاب سیم بسازید.

یک wireframe HTML اسکلت سایت آینده شماست و تنها از ابتدایی ترین برچسب ها و بلوک ها برای نشان دادن محتوا استفاده می کند.

این سؤال پاسخ می دهد ، "چه چیزی روی صفحه می رود و کجا؟"

قالب بندی و سبک کاملاً در یک قاب سیم نادیده گرفته می شود.

نکته1: قاب سیم به شما امکان می دهد قبل از اقدام به انتخاب سبک،ساختار محتوا و جریان را مشاهده کنید.

نکته2: Wireframe HTML مانند PDF یا تصاویر ایستا نیستند،و به شما امکان می دهند بلافاصله بلوک های محتوا را به وجود آورید تا یک ساختار جدید ایجاد کنید.

نکته3: یک ویندوز تعاملی است که هم برای توسعه دهنده و هم برای مشتری مفید است.

از آنجا که wireframe به HTML ساده نوشته شده است ،

هنوز هم می توانید از طریق آن حرکت کنید و حس نحوه حرکت بین صفحات را بدست آورید.

این چیزی است که از طریق یک مفهوم PDF قابل بیان نیست.

ساخت یک Wireframe HTML

2- روش جعبه خاکستری را امتحان کنید.

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

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

به عنوان مثال ، اگر این صفحه صفحه About شرکت باشد،ممکن است اطلاعات مربوط به شرکت در بالای صفحه قرار داشته باشد،به دنبال آن یک لیست کارمندان،به دنبال اطلاعات تماس و غیره.

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

ساخت یک Wireframe HTML

3- یک برنامه قاب سیم را امتحان کنید.

چندین برنامه وجود دارد که می توانند به شما در فرایند سیم کشی کمک کنند.

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

برخی از برنامه های محبوب تر شامل:

  • آزمایشگاه الگو. این سایت در "طراحی اتمی" متخصص است، که در آن هر قطعه از محتوا به عنوان "مولکول" تصور می‌شود که صفحه بزرگ‌تر را می‌سازد.
  •  (Jumpcharts) این یک سرویس طراحی وب سایت و خدمات قاب‌بندی است. این کار به اشتراک حقوق نیاز دارد اما به شما این امکان را می‌دهد که قالب‌های بدون نگرانی زیادی در مورد کدگذاری ایجاد کنید.
  • Wirefy. Wirefy یک سیستم "طراحی اتمی" دیگر است. این ابزارها برای توسعه دهندگان و توسعه دهندگان در دسترس هستند.
ساخت یک Wireframe HTML

4- از نشانه گذاری ساده HTML استفاده کنید.

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

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

در عوض ، از نشانه گذاری استفاده کنید که به راحتی و با کمی تلاش قابل فهم و جابجایی است.

نکته1: این قالب کم‌تر با یک قالب سیمی است.

هدف فقط ساختن ساختار است. ویژوالها را می توان بعداً با CSS و نشانه گذاری پیشرفته تنظیم کرد.

ساخت یک Wireframe HTML

5- برای هر صفحه در سایت خود یک قاب سیم ایجاد کنید.

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

" در واقعیت،این امر به یک سایت عمومی و کسل کننده می انجامد.

وقت خود را برای ایجاد سیم در هر صفحه اختصاص دهید،و به زودی خواهید فهمید که هر صفحه نیازهای سازمانی خاص خود را دارد.

گام 3 - ایجاد محتوا

ایجاد محتوا

1- قبل از شروع به ایجاد وب سایت مقداری از مطالب را آماده کنید.

بسیار راحت تر خواهید بود اگر محتوای واقعی خود را به جای متغیرهایی در اختیار دارید.

چگونه به سبک وب سایت نگاه می کنید. شما به محتوای زیادی احتیاج ندارید.

اما در صورت داشتن تصاویر کپی و اصلی ، در مدل های بسیار بهتر به نظر می رسد.

نکته1: شما لزوماً به بدنه مقاله نیاز ندارید ، اما حداقل باید عناوین واقعی داشته باشید.

ایجاد محتوا

2- به یاد داشته باشید که محتوای خوب بیشتر از متن است.

اینترنت بسیار فراتر از وب سایت‌های متنی ساده است.

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

برخی از محتوای ممکن برای حفظ ذهن:

  • تصاویر
  •  صوتی
  •  تصویری
  •  جریانها (توییتر)
  •  ادغام فیس بوک
  •  RSS
  • مطالب
ایجاد محتوا

3- به یک عکاس حرفه ای سفارش کنید.

اگر از عکس های خود در سایت خود استفاده کنید.

برداشت های اولیه شما با عکاسی حرفه ای بسیار بهتر خواهد شد.

یک عکس خوب تنها ارزش بیش از بیست عکس خوب را دارد.

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

ایجاد محتوا

4- مقالات با کیفیت بنویسید.

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

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

زیرا به محض پخش زنده سایت به طور مرتب به محتوا نیاز خواهید داشت.

نکته1: گذشته از محتوای مقاله ، موارد نوشتاری وجود دارد که به احتمال زیاد در طی مراحل ساخت وب سایت خواهید بود.

این می تواند شامل اطلاعات تماس،نام شرکت یا هر چیز دیگری باشد که در چندین مکان در سایت استفاده می شود.

گام 4 - تبدیل مفهوم به یک سایت

تبدیل مفهوم به یک سایت

1- سبک اجزای جهانی.

این مواردی است که در هر صفحه در سایت شما مشاهده می شود،مانند منوی سربرگ ، پاورقی و فهرست بندی.

یک سبک بسیار ابتدایی ایجاد کنید تا بتوانید ببینید که چگونه تمام صفحات شما به جای آنها ظاهر می شوند.

با حرکت به فرآیند چیدمان ، این کار بسیار مفید خواهد بود.

تبدیل مفهوم به یک سایت

2- یک طرح اولیه ایجاد کنید.

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

به عنوان مثال ، شما ممکن است بلوک ناوبری را به سمت چپ صفحه و لیستی از عناوین در سمت راست منتقل کنید.

نکته1: آزمایش با چیدمان‌ها برای چند صفحه قبل از حرکت ادامه دهید.

بگذارید دیگران آن‌ها را آزمایش کنند تا ببینند آیا آن‌ها ارگانیک هستند یا نه.

تبدیل مفهوم به یک سایت

3- ایجاد یک مدل. از برنامه ای مانند Photoshop استفاده کنید تا بتوانید چند صفحه از سایت خود را ایجاد کنید.

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

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

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

نکته1: برای اطمینان از اینکه همه چیز در کنار هم خوب به نظر می رسند ، محتوای واقعی را وارد کنید.

تبدیل مفهوم به یک سایت

4- بلوک های خود را با محتوا جایگزین کنید.

شروع به اضافه کردن مطالب و عناصر خود به صفحه کنید.

هنوز از سبک نگران نباشید ، فقط همه چیز را در یک مکان صحیح قرار دهید.

این به شما کمک می کند تا بگویید که آیا تغییر سبک شما کار می کند یا خیر.

تبدیل مفهوم به یک سایت

5- یک راهنمای سبک ایجاد کنید.

این برای حفظ سبک منسجم ، به ویژه برای سایت های بزرگتر ضروری است.

اگر سایت برای شغلی است که از قبل دارای مارک تجسمی است،باید در طراحی سایت درج شود.

چیزهایی که به طور بالقوه در یک راهنمای سبک در نظر گرفته می شود:

  • Navigation
  • (Headers (<h1>, <h2>, etc
  • Paragraphs
  • Italics
  • Bolding
  • Links (active, inactive, hovering)
  • Image use
  • Icons
  • Buttons
  • Lists
تبدیل مفهوم به یک سایت

6- سبک خود را اعمال کنید.

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

 CSS یکی از ساده ترین راه ها برای پیاده سازی سبک در یک صفحه یا کل سایت است.

برای اطلاعات بیشتر در مورد استفاده از CSS ، به این راهنما مراجعه کنید.

اطلاعات مطلب

  • عمومی
  • 86 بازدید
  • blankblankblankblankblank (No Ratings Yet)
    blankLoading...
  • آخرین ویرایش توسط : فخر کامبیز - شنبه, 28 سپتامبر 19, 11:37 ق.ظ

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بهترین علوم و دانش برای شما گردآوری میشه

آخرین های آیا میدانید

از همه جا براتون مطلب داریم لطفا کلیک کنید

مطالب برگزیده

موضوعات مهم سایت

مطالب محبوب