اگر می خواهید صفحات وب را طراحی و ایجاد کنید ، اگر از قبل برنامه ریزی کنید این روند بسیار ساده تر خواهد بود. در مرحله برنامه ریزی ، طراح و مشتری می توانند با هم کار کنند تا قالب و طرح مورد نیاز خود را پیدا کنند. فرایند برنامه ریزی بر سبک یا سبک سایت تأثیر می گذارد ، می توانید بگویید این مهمترین جنبه در طراحی وب است ، به ویژه اگر برای اهداف تجاری باشد.
گام
قسمت 1 از 4: ایجاد ساختار اساسی
مرحله 1. عملکرد وب سایت را تعیین کنید
اگر در حال ایجاد یک سایت شخصی هستید ، احتمالاً پاسخ را می دانید. با این حال ، اگر در حال ایجاد سایتی برای سازمان ، شرکت یا شخص دیگری هستید ، باید بدانید که آنها چه می خواهند و عملکرد سایت چیست. تمام مواردی که در اینجا مشخص کرده اید پس از اتمام صفحه وب ، اعمال می شود.
- آیا وب سایت نیاز به ویترین فروشگاه دارد؟ آیا باید نظرات کاربران داده شود؟ آیا کاربر باید بعداً یک حساب کاربری ایجاد کند؟ آیا مقاله وب سایت گرا است؟ یا تصویر گرا؟ همه اینها و س questionsالات دیگر به شما در طراحی و طراحی سایت کمک می کند.
- این فرایند برنامه ریزی را می توان به یک نقاشی کشاند ، به ویژه اگر برای یک شرکت بزرگ باشد و افراد زیادی در ایجاد این پروژه مشارکت داشته باشند.
مرحله 2. یک نمودار نقشه سایت (نقشه سایت) ایجاد کنید
نمودار نقشه سایت مشابه نمودار جریان است که نحوه حرکت کاربران از یک صفحه به صفحه دیگر را نشان می دهد. در این مرحله شما نیازی به یک صفحه وب ندارید ، فقط یک جریان کلی مفاهیم را دنبال کنید. می توانید از یک برنامه کامپیوتری برای ایجاد نمودارها یا ترسیم خود روی کاغذ استفاده کنید. از این نمودار برای نشان دادن مفاهیم ترتیب سلسله مراتبی و اتصال صفحات وب استفاده کنید.
مرحله 3. روش تهیه نقشه را امتحان کنید
یکی از روشهای رایج توسعه وب گروهی استفاده از تعدادی کارت برای آگاهی از انتظارات همه است. تعدادی کارت یادداشت بردارید و محتوای اصلی یک صفحه وب را روی هر یک به صورت جداگانه یادداشت کنید. این کارت ها را با تیم خود ترتیب دهید تا بهترین مفهوم را پیدا کنید. این روش برای استفاده هنگام همکاری با دیگران در ایجاد صفحات وب مناسب است.
مرحله 4. از کاغذ و تابلوی اعلانات یا تخته سفید استفاده کنید
این یک روش برنامه ریزی اصلی با بودجه اندک است ، می توانید محتوا را به سرعت حذف یا تغییر دهید و جریان را تغییر دهید. طراحی وب سایت خود را روی کاغذ بکشید ، سپس کاغذها را با نخ وصل کنید یا خطوطی را روی تخته بکشید. این روش برای استفاده در جلسات طوفان فکری بسیار مناسب است.
مرحله 5. ایجاد موجودی محتوا
در واقع استفاده از آن در طراحی مجدد وب ها مناسب تر از طرح های وب جدید است. هر قطعه تمام شده محتوا یا صفحه وب را در یک صفحه گسترده وارد کنید. با استفاده از این فهرست ، هدف هر قسمت از محتوا یا صفحه را یادداشت کنید تا مشخص شود چه چیزی را حذف کرده و چه چیزی را نگه دارید. می توانید ساختار وب را ساده کرده و مراحل طراحی مجدد را بعداً ساده کنید.
قسمت 2 از 4: ایجاد یک طرح کلی HTML
مرحله 1. یک فریم سیم برای ایجاد سلسله مراتب صفحه وب ایجاد کنید
الگوی اصلی HTML ، نقشه سایتی است که می خواهید بسازید ، تنها از اساسی ترین برچسب ها و نمونه محتویات (بلوک ها/قالب ها) استفاده می کند. این چارچوب به این س answersال پاسخ می دهد که "چه چیزی در وب قابل مشاهده است و کجا؟" قالب بندی و حالت دهی در ایجاد این طرح کلی مورد نیاز نیست.
- قبل از انتخاب تنظیمات سبک ، می توانید ساختار و نمودار جریان محتوا را با یک طرح کلی اساسی مشاهده کنید.
- الگوهای HTML اولیه مانند PDF یا تصاویر ثابت نیستند ، شما می توانید به سرعت محتوای نمونه را برای ایجاد ساختارهای جدید بکشید.
- چارچوب پایه تعاملی است که هم برای توسعه دهندگان وب و هم برای مشتریان مفید است. از آنجا که این چارچوب اساسی با کد HTML ساده نوشته شده است ، هنوز می توانید در آن حرکت کرده و نحوه تعویض صفحات وب را بدانید. این را نمی توان با PDF انجام داد.
مرحله 2. روش جعبه خاکستری را امتحان کنید
محتوای صفحه وب خود را در Gray Box مسدود یا برجسته کنید ، مهمترین محتوا در بالا قرار دارد. محتویات را در یک ستون مرتب کنید. به عنوان مثال ، اگر صفحه "درباره شرکت" است ، اطلاعات دقیق در مورد شرکت در بالا قرار دارد ، به دنبال آن لیستی از کارکنان ، سپس اطلاعات تماس و غیره.
این شامل سرصفحه و پاورقی نمی شود. خاکستری جعبه یک نمایش بصری از محتوایی است که در وب ظاهر می شود
مرحله 3. یک برنامه اولیه سازنده طرح کلی را امتحان کنید
برنامه های مختلفی وجود دارد که می توانید در فرایند ایجاد یک چارچوب اصلی وب استفاده کنید. میزان کد برنامه نویسی وب (زبان) که باید در آن تسلط داشته باشید برای هر برنامه متفاوت است. برخی از برنامه هایی که بسیار محبوب هستند عبارتند از:
- آزمایشگاه الگو. این سایت به "طراحی اتمی" اختصاص داده شده است ، هر محتوا یک "مولکول" محسوب می شود که یک صفحه وب بزرگتر را تشکیل می دهد.
- جامپچارت ها. این صفحه وب خدمات برنامه ریزی و چارچوب بندی مبتنی بر وب را ارائه می دهد. این سایت ها پولی هستند و نیاز به اشتراک دارند ، اما می توانید بدون نیاز به تسلط بر تعداد زیادی از کد برنامه نویسی وب ، به سرعت چارچوب های وب ایجاد کنید.
- وایرفای Wirefy سایت دیگری است که "طراحی اتمی" را ارائه می دهد. توسعه دهندگان وب می توانند این ابزار را به صورت رایگان دریافت کنند.
مرحله 4. از نشانه گذاری ساده HTML استفاده کنید
یک الگوی اصلی خوب به راحتی به سایت اصلی تبدیل می شود. در حین ایجاد این الگو زیاد به طراحی وب فکر نکنید. از نشانه گذاری استفاده کنید که به راحتی قابل درک و تغییر باشد.
یک چارچوب ساده ساده بسیار بهتر است. هدف از ایجاد نشانه گذاری ایجاد یک ساختار است. ظاهر بصری بعداً با CSS و نشانه گذاری پیشرفته قابل تنظیم است
مرحله 5. یک طرح کلی برای هر صفحه وب ایجاد کنید
ممکن است وسوسه شوید که هر صفحه وب را با یک طرح کلی اصلی برابر بدانید. در واقع ، این فقط سایت شما را ساده و خسته کننده می کند. یک طرح کلی متفاوت برای هر صفحه ایجاد کنید ، متوجه خواهید شد که هر صفحه به طراحی خاص خود نیاز دارد.
قسمت 3 از 4: ایجاد محتوا
مرحله 1. قبل از ایجاد یک صفحه وب ، محتوا را آماده کنید
اگر از قبل از محتوای واقعی به جای استفاده از نمونه ها یا متغیرهایی استفاده کرده اید ، پیش نمایش وب سایت خود را بسیار ساده تر می کنید. نیازی نیست محتوای زیادی داشته باشید ، اما اگر از کپی تصویر اصلی استفاده کنید ، مدل شما بسیار بهتر به نظر می رسد.
لازم نیست همه مطالب مقاله را داشته باشید ، اما حداقل باید یک عنوان واقعی داشته باشد
مرحله 2. به یاد داشته باشید که محتوای عالی فقط یک متن نیست
اینترنت بسیار پیچیده تر از یک صفحه وب ساده متنی است. برای ایجاد یک وب سایت عالی برای جذب و دعوت از بازدیدکنندگان ، به محتواهای مختلف نیاز دارید. مثلا:
- تصویر
- صدا
- فیلم های.
- انتقال وب یا جریان وب (توییتر)
- ادغام فیس بوک
- RSS
- خوراک وب
مرحله 3. از یک عکاس حرفه ای کمک بخواهید
اگر می خواهید عکس هایی را در سایت خود قرار دهید ، اولین تصویری که از وب سایت خود به دست می آورید اگر با عکاسی حرفه ای پر شود بسیار بهتر خواهد بود. ارزش یک عکس خوب بیشتر از بیست عکس با کیفیت پایین است.
به دنبال یک فارغ التحصیل تازه از هنر عکاسی به عنوان یک راه حل ارزان تر از یک عکاس حرفه ای باشید که مدت زیادی در این حرفه فعالیت داشته است
مرحله 4. مقاله های با کیفیت بنویسید
محتوای نوشته شده در صفحه وب میزان ترافیک وب شما را تعیین می کند. در حالی که در این فرآیند طراحی لازم نیست زیاد نگران ایجاد محتوا باشید ، شروع به فکر کردن به آن ضرری ندارد زیرا هنگامی که سایت شما راه اندازی شد ، شما نیز به طور منظم به محتوا نیاز خواهید داشت.
علاوه بر محتوای مقاله ، مطالب نوشته شده ای نیز وجود دارد که باید در مراحل تدوین صفحه وب نیز داشته باشید. به عنوان مثال اطلاعات تماس ، نام شرکت یا هر چیز دیگری که چندین بار در سایت استفاده می شود
قسمت 4 از 4: تبدیل مفاهیم به وب سایت ها
مرحله 1. عناصر اصلی را مرتب کنید
این ترتیب عناصر برای هر صفحه در سایت شما مانند سرصفحه ها ، پاورقی ها و منوهای ناوبری اعمال می شود. آن را به سبک بسیار ساده تنظیم کنید تا بتوانید ظاهر تمام صفحات را بررسی کنید. این امر به ویژه هنگام پیشرفت در فرایند طراحی وب مفید است.
بیش از حد نگران جزئیات نباشید ، سعی کنید پیش نمایش (پیش نمایش) چگونگی ظاهر هدر را مشاهده کنید
مرحله 2. یک طرح بندی ساده ایجاد کنید
با تغییر موقعیت ساعت از ستون اصلی طرح به مکان واقعی صفحه شروع کنید. به عنوان مثال ، ممکن است بخواهید نمونه منوی ناوبری را به سمت چپ صفحه و فهرست سرفصل ها را به سمت راست منتقل کنید.
قبل از رفتن به مرحله بعدی ، با طرح بندی وب برای چندین صفحه آزمایش کنید. اجازه دهید دیگران به آن نگاه کنند تا ببینند آیا چیدمانی که ایجاد می کنید زنده است یا خیر
مرحله 3. ایجاد یک طرح اولیه
از برنامه ای مانند Photoshop برای ایجاد ماکت یا نمونه صفحات وب سایت خود استفاده کنید. از طرح بندی که تهیه کرده اید به عنوان راهنما استفاده کنید. می توانید ماکت ها را سریعتر انجام دهید و با یک برنامه پردازش تصویر به نتایج مورد نظر خود برسید. نتایج این تصاویر بعداً می تواند به عنوان مرجع در فرایند نوشتن کد برنامه نویسی وب مورد استفاده قرار گیرد.
محتوای واقعی را در ماکت قرار دهید تا خوب به نظر برسد
مرحله 4. مفهوم نمونه را با محتوای اصلی جایگزین کنید
افزودن محتوا و عناصر به صفحات وب. فعلا تنظیمات سبک وب را خسته نکنید ، فقط همه چیز را در مکان مناسب قرار دهید. این به شما کمک می کند تغییرات سبک وب را که بعداً انجام می دهید مرور کنید.
مرحله 5. یک راهنمای سبک وب ایجاد کنید
حفظ ترکیبی از سبک ها ، به ویژه برای سایت های بزرگ بسیار مهم است. اگر سایت برای اهداف تجاری در نظر گرفته شده است و قبلاً دارای نام تجاری یا سبک خاص خود است ، باید در طراحی سایت ادغام شود. مواردی که هنگام ایجاد راهنمای سبک صفحه وب باید در نظر بگیرید:
- جهت یابی
- یادداشت سر
- پاراگراف
- شخصیت ایتالیک
- شخصیت جسورانه
- پیوندها (فعال ، غیرفعال ، شناور)
- استفاده از تصویر
- آیکون
- دستگیره
- لیست
مرحله 6. سبک وب را اعمال کنید
هنگامی که سبک و طراحی مناسب را پیدا کردید ، آن را پیاده کنید. CSS یکی از ساده ترین روش ها برای پیاده سازی سبک ها در یک صفحه وب یا در سراسر سایت است. برای درک بهتر جزئیات استفاده از CSS ، دستورالعمل های زیر را ببینید.
