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

فهرست مطالب:

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

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

تصویری: نحوه طراحی وب سایت (همراه با تصاویر)
تصویری: همه چیز درباره پاک کردن لکه ها 2024, ممکن است
Anonim

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

گام

قسمت 1 از 2: ایجاد طراحی سایت

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

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

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

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

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

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

برای شما آسان تر خواهد بود که صفحات سایت خود را با ایجاد تصاویر خشن و نه فقط سایه ها تجسم کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مرحله 8. گزینه های منحصر به فرد را اعمال کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

وقتی بازدیدکننده ای به صفحه خاصی می رسد که ایجاد نشده یا وجود ندارد ، صفحه "خطای 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. سایت را به روز نگه دارید

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

نکات

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

هشدار

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

توصیه شده: