نحوه طراحی وب سایت (همراه با تصاویر)

فهرست مطالب:

نحوه طراحی وب سایت (همراه با تصاویر)
نحوه طراحی وب سایت (همراه با تصاویر)

تصویری: نحوه طراحی وب سایت (همراه با تصاویر)

تصویری: نحوه طراحی وب سایت (همراه با تصاویر)
تصویری: آموزش اتصال دسته PS5 و PS4 به کامپیوتر با نرم افزار DS4 WINDOWS 2024, ممکن است
Anonim

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

مراحل

قسمت 1 از 2: چگونه وب سایت خود را طراحی کنیم

طراحی وب سایت مرحله 1
طراحی وب سایت مرحله 1

مرحله 1. تعیین اینکه آیا می خواهید از سازنده وب سایت استفاده کنید یا خیر

وب سایت هایی که از ابتدا ایجاد شده اند نیاز به درک کاملی از کدنویسی HTML دارند ، اما به راحتی می توانید با استفاده از سرویس میزبانی رایگان مانند Weebly ، Wix ، WordPress یا Google Sites یک وب سایت ایجاد کنید. برای طراحان اولین بار استفاده از سازندگان وب سایت بسیار راحت تر از HTML است.

  • اگر تصمیم گرفتید وب سایت خود را کدگذاری کنید ، باید کد نویسی HTML و CSS را یاد بگیرید.
  • اگر صرف وقت و انرژی برای ایجاد وب سایت شما جذاب به نظر نمی رسد ، می توانید طراح وب سایت را نیز استخدام کنید تا سایت شما را برای شما ایجاد کند. هزینه طراحان مستقل بین 30 دلار در ساعت و بسیار بیشتر از 100 دلار در ساعت است.
طراحی وب سایت مرحله 2
طراحی وب سایت مرحله 2

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

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

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

طراحی وب سایت مرحله 3
طراحی وب سایت مرحله 3

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

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

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

مرحله 4. ثابت قدم باشید

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

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

مرحله 5. گزینه های ناوبری را اضافه کنید

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

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

طراحی وب سایت مرحله 6
طراحی وب سایت مرحله 6

مرحله 6. از رنگ هایی که مکمل یکدیگر هستند استفاده کنید

مانند هر نوع طراحی دیگر ، طراحی وب سایت نیز بر اساس ترکیب رنگهای دلپذیر متکی است. به همین دلیل ، انتخاب رنگ های موضوعی که با هم هماهنگ هستند بسیار مهم است.

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

طراحی وب سایت مرحله 7
طراحی وب سایت مرحله 7

مرحله 7. استفاده از یک طرح مینیمالیستی را در نظر بگیرید

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

  • بسیاری از سازندگان وب سایت دارای تم "مینیمالیستی" هستند که می توانید هنگام راه اندازی وب سایت خود انتخاب کنید.
  • جایگزین مینیمالیسم "بی رحمی" است که از خطوط تندتر ، رنگهای روشن ، متن پررنگ و حداقل تصاویر استفاده می کند. Brutalism طرفداران کمتری نسبت به مینیمالیسم دارد ، اما بسته به محتوای وب سایت شما ، ممکن است بهتر با نیازهای طراحی شما مطابقت داشته باشد.
طراحی وب سایت مرحله 8
طراحی وب سایت مرحله 8

مرحله 8. انتخابهای منحصر به فرد داشته باشید

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

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

قسمت 2 از 2: چگونه می توان عملکرد وب سایت را به حداکثر رساند

طراحی وب سایت مرحله 9
طراحی وب سایت مرحله 9

مرحله 1. از گزینه های بهینه سازی تلفن همراه استفاده کنید

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

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

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

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

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

طراحی وب سایت مرحله 11
طراحی وب سایت مرحله 11

مرحله 3. یک صفحه "تماس" اضافه کنید

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

طراحی وب سایت مرحله 12
طراحی وب سایت مرحله 12

مرحله 4. یک صفحه 404 سفارشی ایجاد کنید

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

  • یک پیام خطای سبک (مثلاً "تبریک می گویم - صفحه خطای ما را پیدا کردید!")
  • پیوند بازگشت به صفحه اصلی سایت
  • لیستی از پیوندهای معمول مشاهده شده
  • تصویر یا لوگو برای وب سایت شما
طراحی وب سایت مرحله 13
طراحی وب سایت مرحله 13

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

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

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

طراحی وب سایت مرحله 14
طراحی وب سایت مرحله 14

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

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

  • فراخوان برای اقدام (به عنوان مثال ، یک دکمه برای کلیک یا یک فرم برای پر کردن)
  • نوار ابزار ناوبری یا منو
  • یک گرافیک دعوت کننده (به عنوان مثال ، یک عکس جامد ، یک فیلم ، یا یک گروه کوچک از عکس ها با متن همراه)
  • کلمات کلیدی مربوط به خدمات ، موضوع یا تمرکز وب سایت شما
طراحی وب سایت مرحله 15
طراحی وب سایت مرحله 15

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

این امر فوق العاده مهم است ، زیرا مرورگرهای مختلف ممکن است جنبه های وب سایت شما را به شکل متفاوتی مدیریت کنند. قبل از شروع تبلیغ وب سایت خود ، سعی کنید از وب سایت خود در مرورگرهای زیر در سیستم عامل های Windows ، Mac ، iPhone و Android دیدن کرده و از آن استفاده کنید:

  • گوگل کروم
  • فایرفاکس
  • Safari (فقط iPhone و Mac)
  • Microsoft Edge و Internet Explorer (فقط Windows)
  • مرورگر داخلی در چندین تلفن مختلف Android (به عنوان مثال ، Samsung Galaxy ، Google Nexus و غیره)
طراحی وب سایت مرحله 16
طراحی وب سایت مرحله 16

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

روند طراحی ، پیوندها ، عکس ها ، مفاهیم و کلمات کلیدی همه با گذشت زمان تغییر می کنند ، بنابراین برای به روز بودن باید مجبور به ایجاد تغییرات در وب سایت خود باشید. این امر از شما می خواهد حداقل هر سه ماه یکبار (ترجیحاً بیشتر) عملکرد وب سایت خود را در کنار سایر وب سایت های مشابه بررسی کنید.

راهنمای اولیه HTML

Image
Image

نمونه صفحه وب با HTML

پشتیبانی از wikiHow و همه نمونه ها را باز کنید.

Image
Image

صفحه تقلب HTML

پشتیبانی از wikiHow و همه نمونه ها را باز کنید.

Image
Image

نمونه صفحه ساده وب

پشتیبانی از wikiHow و همه نمونه ها را باز کنید.

نکات

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

هشدارها

  • اکثر سازندگان سایت رایگان هستند. با این حال ، اگر می خواهید از دامنه خود استفاده کنید (به عنوان مثال ، "www.yourname.com" به جای "www.yourname.wordpress.com") ، باید ماهانه یا سالانه هزینه پرداخت کنید.
  • از سرقت ادبی اجتناب کنید و تمام قوانین کپی رایت را رعایت کنید: تصاویر تصادفی از وب یا حتی عناصر ساختاری را بدون اجازه اضافه نکنید.

توصیه شده: