توسعه وب و طراحی 101

web_development_101آیا می خواهید اصول اولیه توسعه و طراحی وب را بدانید؟ عالی…


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

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

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

[هشدار اسپویلر. بله ، می توانید در اولین تلاش خود یک وب سایت با کیفیت بسازید.]

آنچه در این راهنما پوشیده شده است?

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

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

معرفی راهنمای: فصل 1

اکنون ، چگونه می توان ادامه داد:

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

آماده؟ بیایید به فصل 1 برویم.

این راهنما برای چه کسی است?

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

همچنین ، برای شروع کار به دانش فنی قبلی دیگری احتیاج ندارید (به غیر از “مهارت های اساسی” وب). نکته اصلی این راهنما این است که نوعی دوره “101” برای همه علاقه مند به ساخت وب سایت و یادگیری توسعه وب باشد.

در اینجا دلایل متداولی وجود دارد که شما ممکن است علاقه مند شوید:

  • 1. برای تجارت خود به وب سایت احتیاج دارید (و شما می خواهید ببینید که آیا می توانید خودتان آنرا بسازید).
  • 2. شما می خواهید توسعه وب را از اشتیاق یا علاقه موقت بیاموزید (هیچ چیز بدی در مورد آن).
  • 3. شما به یک وب سایت برای مدرسه احتیاج دارید.
  • 4. شما در حال کمک کردن از یک دوست یا عضو خانواده هستید تا وب سایت خود را آنلاین کنید.

ایده اصلی که می خواهد ما را راهنمایی کند

این مهم است! لطفاً اگر یک توسعه دهنده وب پیشرفته هستید این را بخوانید ، با ما عصبانی نشوید ، اما ایده اصلی که ما را در کل این منبع توسعه و طراحی 101 وب راهنمایی می کند این است:

“حداقل مقاومت”

در اینجا سه ​​اصل کمترین رویکرد مقاومت وجود دارد:

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

فصل 1: برنامه

ایده شما ، نوع وب سایت ، نام دامنه و هاستینگ.

قبل از راه اندازی وب سایت ، به یک برنامه نیاز خواهید داشت

همانطور که ممکن است به نظر بیاد جالب باشد – نمایش “80-A” سریال “A-Team” به ما آموخته است ، برنامه خوبی است کلید موفقیت.

اگر مدت مدیدی در وب سایت خود نشسته اید ، مطمئناً از این ایده که در نهایت خواندن و مرور دیگران را بیرون آورده اید ، هیجان زده اید.

شما می خواهید وب سایت شما بسیار جذاب باشد. شما احتمالاً می دانید که تا چه اندازه به نظر می رسد. یا شاید شما حتی یک آرم کامل را نیز آماده کرده باشید.

ولی…

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

درعوض ، به موارد زیر فکر کنید:

  1. خود را از اهداف فنی که ممکن است داشته باشید جدا کنید. به عنوان مثال ، هدف از یادگیری فن آوری های وب سایت یا نرم افزار خاص وب سایت است.
  2. از خود یک سؤال اصلی بپرسید: “برای چه سایت نیاز دارم؟”

این در مورد شما نیست ، این در مورد هدف سایت است.

سؤالاتی که قبل از راه اندازی وب سایت خود باید از خود بپرسید

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

درباره این 3 سوال آخر ، بگذارید یک دقیقه با مخاطبان صحبت کنیم …

2 قانون اصلی برای ساخت وب سایت وجود دارد. در اینجا قانون شماره 1 آمده است:

 خواننده / بازدید کننده اول می آید. آنها شخص اصلی هستند که وب سایت شما باید از آن لذت ببرد.

به نوعی ، وب سایت شما متعلق به شما نیست. مال آن هاست.

(قانون شماره 2 ما در یک دقیقه بحث خواهیم کرد.)

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

“اوه! مردم فقط نمی فهمند این سایت چیست. چگونه می توانند اینقدر نادان باشند؟ ” – در آخر فکر می کنید اما همانطور که معلوم است ، فرد نادان شما بودید.

تنها راه جلوگیری از این امر ، ایجاد وب سایت خود در ذهن خواننده درست از زمان دریافت است.

بنابراین … آن تکه کاغذ را بگیرید و به تمام سوالات فوق پاسخ دهید.

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

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

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

نام دامنه و میزبانی وب

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

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

بنابراین ، یک هاست و دامنه …

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

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

اما بیایید در ابتدا شروع کنیم.

میزبان وب:

  • به زبان ساده ، میزبان وب جایی است که وب سایت شما در آن قرار دارد و بازدید کنندگان شما می توانند آن را پیدا کنند. به نوعی ، میزبان وب برای وب سایت ها دقیقاً شبیه آپارتمان برای انسان است. تحت این هود ، میزبان وب شرکتهایی هستند که در ازای پول سرورهای خود را اجاره می دهند (… آپارتمان های کوچک برای وب سایت های شما).
  • برای شروع ، یک برنامه میزبانی مشترک مشترک انجام خواهد داد. شما می توانید برای هر چیزی که حداقل از 3 دلار در ماه شروع شود ، دریافت کنید. در اینجا مقایسه خوبی از میزبان وب محبوب است. آن را بررسی کنید و تصمیم بگیرید که کدام یک از این شرکتها برای شما مناسب است. با این حال ، توصیه های ما برای SiteGround ، A2 هاستینگ و Dreamhost پیش می رود.

دامنه ها:

  • اگر یک میزبان وب یک آپارتمان است ، آنگاه دامنه آدرس آن آپارتمان است. به عنوان مثال ، دامنه این وب سایت hostingfacts.com است.
  • راه کار این است که نام دامنه مورد نظر خود را انتخاب کرده و سپس آن را از یک ثبت خریداری کنید. در اینجا یک راهنمای جامع درباره نحوه خرید نام دامنه وجود دارد ، و در اینجا لیستی از تولید کنندگان نام دامنه وجود دارد.

 

پیشنهادات و نکاتی برای انتخاب نام دامنه

خوب ، بنابراین رفتن به برخی از ثبت دامنه و در واقع خرید دامنه یک چیز است ، اما چگونه نام دامنه مناسب را انتخاب می کنید?

چند مدرسه وجود دارد:

  • نام دامنه مارک دار. اینها دامنه هایی هستند که از کلمات غیر موجود تشکیل شده اند. فکر کنید ، مواردی مانند Google.com یا Yahoo.com. قبل از اینکه این شرکتها با هم جمع شوند ، این کلمات به معنای هیچ چیز نبود. جنبه نام تجاری دامنه با مارک این است که … خوب ، بسیار با مارک ، به یاد ماندنی است و تشخیص سایت شما از دیگران آسان است.
  • نام های مبتنی بر کلید واژه. این کلمات از کلمات موجود تشکیل شده اند ، در دنباله ای که هدف سایت را شرح می دهد. فکر کنید ، مواردی مانند Pizza.com یا StartBloggingOnline.com. با نام دامنه ای مشابه ، بازدید کنندگان شما قادر خواهند بود نوع وب سایتی را که می خواهند بازدید کنند دقیقاً پیش بینی کنند. نکته منفی این است که آن دامنه ها به طور کلی دارای مارک کمتر هستند.
  • نامهای ترکیبی. دامنه های مارک دار و دامنه های مبتنی بر کلمه کلیدی در کنار هم قرار گرفته اند. فکر کنید ، Facebook.com یا Copyblogger.com. چنین نامهایی بخشی از ماهیت وب سایت را برای بازدید کننده نشان می دهد ، اما هنوز هم بسیار با ارزش هستند.

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

  • این دامنه را به راحتی می توانید حفظ کنید.
  • آن را کوتاه و ساده کنید. هرچه دامنه طولانی تر باشد ، گیج کننده تر خواهد بود.
  • دریافت یک .com (در صورت امکان). .com “دامنه سطح بالا” موجود است. برای هر چیز دیگری حل و فصل نکنید.
  • سعی کنید از پره ها جلوگیری کنید. به جای “کیک-recipes.com” نام خود را به شکل تک بلوکی مانند “cakerecipes.com” دریافت کنید

چیزهایی که بعد از این فصل آماده است:

  • یک نام دامنه.
  • میزبان وب.
  • برگه پاسخهای شما – اهداف سایت شما و نحوه ارائه خدمات به مخاطبان.

به کمک بیشتری نیاز دارید؟ در اینجا بیشتر برای شما می خوانیم:

  • چرا میزبانی مشترک؟ انواع اصلی میزبان مقایسه شده است
  • 10 موردی که میزبان وب را خوب می کند
  • 12 قانون برای انتخاب نام دامنه مناسب
  • راهنمای جامع برنامه ریزی وب سایت

فصل 2: ​​طراحی و سیم کشی

یک کاغذ و قلم بگیرید و با ساختار وب سایت خود خراش دهید

خوب ، اجازه دهید وارد مرحله طراحی شویم.

اول موارد ، ابتدا اخلاق کاری که می خواهیم به اینجا بپردازیم:

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

در فصل 1 ، چیزی را ذکر کردیم که آن را قانون شماره 1 ساخت وب سایت نامیدیم. اکنون زمان قانون شماره 2 است:

قانون شماره 2 ساختمان وب سایت:

ابتدا به محتوا فکر کنید.

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

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

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

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

“واقعاً؟ به نظر می رسد مهم نیست؟ ” – تو پرسیدی.

به جای اینکه ما این کار را بزنیم ، این صفحه را بررسی کنید:

وب سایت ساده

این صفحه وب ساده بهترین توضیحی است که طراحی چیست و به چه هدف آنلاین ارائه می دهد.

پس ابتدا به یاد داشته باشید ، محتوا!

محتوای وب سایت و ساختار

خوب ، بنابراین از آنجا که محتوا مهمترین چیز است ، شما باید از قبل (اکثر) آن را از قبل آماده کنید. یا حداقل ، شما باید ایده خوبی داشته باشید که قرار است محتوای شما به چه شکلی باشد و به چه شکلی باشد.

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

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

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

تمام این کارها را روی کاغذ انجام دهید. احتمالاً این امر آسانتر و سریعتر از یادگیری برخی از نرم افزارهای ترسیم نمودار در محل خواهد بود.

مثال:

ساختار محتوا

با هم یک Wireframe را خراش دهید

قاب صفحه در طراحی وب صرفاً یک صفحه شماتیک یا طرح است – یک راهنمای تصویری که چارچوب یک وب سایت را نشان می دهد (ویکی پدیا به ما می گوید).

Wireframes بسیار جذاب است! ما از آنها برای اکثر کارهایی که انجام می دهیم استفاده می کنیم که منظورشان آنلاین ظاهر می شود. به عنوان مثال ، یک قاب سیم برای این راهنمای بسیار دقیق وجود دارد:

یک قاب سیم را با هم خراش دهید

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

بنابراین ، چگونه می توان به قالب سیم زد?

خوب ، اگر مبتدی باشید ، دو رویکرد وجود دارد:

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

برای دومی ، به اینجا بروید – یک راهنمای عالی.

(اطمینان حاصل کنید که برای هر نوع صفحه مهمی که در مرحله قبلی ذکر کرده اید ، یک قاب سیم ایجاد کنید.)

چیزهایی که بعد از این فصل آماده است:

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

خواندن بیشتر:

  • 9 مرحله برای برنامه ریزی محتوای وب سایت
  • برای طراحی وب جدید هستید؟ از اینجا شروع کنید.

فصل 3: UX و UI

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

مانند تجربه ، تجربه کاربری و رابط کاربری.

WebDesignerDepot تعریف نسبتاً شاعرانه از این دو را به ما می دهد:

UI زین ، برآمدگی و سلطنت است.

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

برای تعریف عملی تر:

  • UI همان چیزی است که کاربر هنگام نگاه به سایت شما می بیند.
  • UX چگونه آنها نسبت به آن احساس می کنند.

این جفت و چقدر خوب اجرا می شوند ، اساساً سودمندی وب سایت شما را برای کاربر نهایی / بازدید کننده تعریف می کنند.

هر دو طراحی UX و UI به خودی خود موضوعات بزرگی هستند و بسیاری از عناصر کوچکتر نیز در نتیجه نهایی نقش دارند.

خلاصه ، چیز تازه ای وجود دارد که بدانید آیا تازه سفر خود را آغاز کرده اید.

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

اهداف کاربر

UX در مورد اهداف کاربر است … نه به اندازه اهداف شما … اهداف کاربر.

خوب ، این به چه معنی است؟ اول از همه ، به هدف وب سایت خود برگردید – کاری که در فصل های قبل روی آن کار کرده اید. دلیل ایجاد وب سایت و نحوه کمک به کاربر / بازدید کننده.

چگونه می توان آن را به هدف بازدید کننده ترجمه کرد؟ … تنها چیزی که بازدید کننده می خواهد هنگام مراجعه به سایت شما بدست آورد یا به آن برسد چیست؟ این هدف آنهاست.

دستیابی به این اهداف چقدر آسان است?

بعد ، روی سوال زیر تمرکز کنید:

  • آیا بازدید کننده می تواند به راحتی به هدف خود برسد؟ – آیا می توانند با روشی ساده به اطلاعات دقیق مورد نظر خود برسند?

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

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

اساساً ، در اینجا ، ما اطمینان می دهیم که وب سایت به بازدید کنندگان شما ارزش می دهد.

دشوار است که همه اینها را به تنهایی مشخص کنید ، اینگونه نیست?

توصیه می شود منابع ذکر شده در بخش “مطالعه بیشتر” این فصل را بررسی کنید … اما می توانید “هک” را نیز امتحان کنید..

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

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

استفاده از احساسات به عنوان ابزاری

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

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

برای کار روی قسمت عاطفی کار ، یکی از بهترین ابزارها رنگ است.

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

هنگامی که در قسمت toppark از رنگ هایی که می خواهید استفاده کنید (احتمالاً) استفاده می کنید ، در هنگام کار با رنگ ، چند دستورالعمل کلی ارائه می شود:

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

تایپوگرافی

در بسیاری موارد ، تایپوگرافی جایی است که شما بازی ساختمان وب سایت را برنده (یا از دست می دهید).

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

توصیه نمیشود.

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

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

به عنوان مثال این سایت را بررسی کنید:

bonobos

متوجه چیزی شدی؟ بله ، قلم ها بسیار زیاد هستند و از نظر ظاهری عالی هستند!

در اینجا نحوه کار با این روش آورده شده است:

  • به طور کلی ، هر طراحی وب سایت به دو نوع متن نیاز دارد: عناوین و پاراگراف. در بیشتر موارد ، فقط در هر هرکدام فقط یک قلم انجام می شود.
  • به فونت های Google بروید – کتابخانه فونت های رایگان گوگل که می توانید در وب سایت خود استفاده کنید – و به دنبال یک فونت عنوانی باشید که واقعاً از آن لذت ببرید.
  • سپس ، نام آن قلم را بگیرید و به دنبال آن در Font Pair باشید – این یک کتابخانه از جفت های پیش ساخته ساخته شده است که به خوبی جمع می شوند.
  • یک جفت را انتخاب کنید که بسیار جذاب باشد.
  • نام هر دو فونت را یادداشت کنید ، بعداً به آنها احتیاج خواهید داشت.

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

به عنوان مثال ، ما فونت هایی با نام Bree Serif را در فونت های Google پیدا کردیم که کاملاً از آن لذت می بریم:

Bree-Serif

سپس ، ما آن را به Font Pair بردیم و سایت اعلام كرد كه Bree Serif با Open Sans خوب پیش می رود. کامل:

Bree-Serif-sans-open

ساختار نهایی

سرانجام ، آخرین مرحله!

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

چیزهایی که بعد از این فصل آماده است:

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

خواندن بیشتر: 

  • مجله UX
  • غرفه UX
  • روانشناسی و احساسات پشت رنگ در طراحی وب
  • طراحی تجربه کاربر چیست؟ مرور کلی ، ابزارها و منابع
  • تعیین اهداف تجاری هوشمند برای یک وب سایت
  • 8 قانون برای ایجاد تایپوگرافی موثر

فصل 4: WordPress ، HTML یا Templates?

تصمیم بگیرید که کدام مسیر را طی کنید – سیستم های مدیریت محتوا یا کدگذاری آن از ابتدا

اینجا جایی است که کار واقعی ، دست کثیف و زیر کاپوت شروع می شود!

این همچنین احتمالاً ترسناکترین بخش فرآیند است (اعتراف کنید!).

برای یک بار ، زمان مناسب برای کنار گذاشتن قلم و کاغذ و شروع به کار با برخی نرم افزارهاست.

و درست از کنار دروازه ، یک سؤال وجود دارد …

  • آیا باید HTML یاد بگیرم?
  • در مورد CSS چطور؟?
  • آیا قالب های وب سایت HTML آماده این کار را برای من انجام می دهند?
  • آیا باید زبان برنامه نویسی مانند PHP یاد بگیرم?
  • من شنیده ام وردپرس این روزها روش ساخت یک سایت است.
  • من آن تبلیغات Super Bowl Squarespace را دیدم. چه خبر؟?
  • این چیزی به نام جوملا چیست؟ یا دروپال?
  • و در و در و در.

جواب همه اینها بله است.

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

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

بنابراین چگونه می خواهیم از این فصل به جلو جلو برویم. اولین, شخصیتی را انتخاب کنید که شما را به بهترین شکل تعریف کند:

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

پاسخ داد: الف)? به فصل 5 بروید.

پاسخ داده شده ب)? به فصل ششم بروید.

پاسخ داده شده ج)? با مراجعه به این مقاله احساس راحتی کنید و دوباره برگردید (باید به شما در انتخاب مسیر کامل کمک کرد):

  • 8 بهترین سیستم عامل وبلاگ نویسی و ساخت وب سایت مورد بررسی قرار گرفته است … هر پلتفرم همراه با جوانب مثبت و منفی توصیف شده است ، و این منبع همچنین بهترین انتخاب موجود (Wix یا SB) را برای نیازهای خاص شما پیشنهاد می کند..

آیا آن را خوانده ای؟ عالی! بنابراین کدام یک از شخصیت های بالا شما را به بهترین وجه توصیف می کند – الف یا ب)?

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

  • گرافیک: Paint.NET ، Gimp ، Pixlr.
  • نوشتن کد: دفترچه یادداشت ++ ، TextWrangler ، SublimeText.
  • مدیریت کار: Trello.
  • طراحی: نقشه های رنگی ، فونت های Google ، ابزارهایی از اینجا.
  • عکاسی: Unsplash ، AllTheFreeStock

فصل 5: آشنایی با HTML ، CSS & جاوا اسکریپت

چگونه وب سایتها یک واقعیت داخلی هستند

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

HTML

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

به عنوان مثال ، برای دیدن ساختار HTML این راهنمایی که در اینجا می خوانید ، کافیست “Ctrl + U” را روی صفحه کلید خود فشار دهید.

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

برای یادگیری موثر HTML ، ما به شما توصیه می کنیم در یکی از دوره های (رایگان یا پولی) موجود در وب ثبت نام کنید. برخی از بهترین آن ها را می توان در Codeacademy یا Treehouse یافت.

به عنوان مثال ، در اینجا بخش خاصی درباره Codeacademy درباره HTML و CSS وجود دارد.

صفحه اصلی CodeCademy

بنابراین این رویکرد جامع به HTML است.

CSS

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

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

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

برای یادگیری عمیق تر ، بخش CSS را نیز در Codeacademy یا Treehouse بررسی کنید.

JavaScript ، jQuery ، Bootstrap و غیره.

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

با توجه به این نکته ، jQuery یک کتابخانه جاوا اسکریپت است که به شما امکان می دهد موارد پیشرفته و با کدگذاری کمتری ایجاد کنید. برای یک توسعه دهنده وب بسیار مفید است. در اینجا بیشتر بیاموزید.

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

اما اینطور نیست فقط کافی است این دوره آغازگر را در Codeacademy بررسی کنید (به هر حال ، اینگونه است که ما ابتدا Bootstrap را یاد گرفتیم).

چیزهایی که بعد از این فصل آماده است:

  • در اصل ، اولین پیش نویس وب سایت HTML / CSS شما کاملاً ساخته شده است. از آنجا می توانید تکرار و بهبود نتیجه نهایی را شروع کنید.

فصل 6: سكوهاي ساخت وب سايت

اولین سایت خود را تنظیم کنید؟ سیستم عامل های وب سایت رایگان مانند وردپرس ، جوملا یا دروپال را امتحان کنید

فصل ششم: سکوهای ساختمان وب سایت

  • SquareSpace
  • وردپرس
  • جوملا & دروپال

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

باشه ، شوخی کن.

واضح است ، اگر شما مایل به یادگیری نحوه رمزگذاری امور با دستی نیستید ، مطمئناً آنها چندین راه حل هستند که می توانند به شما کمک کنند.

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

شروع با مواردی که ساده ترین درک آنهاست:

SquareSpace

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

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

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

وردپرس

راستش ، ما وردپرس را دوست داریم.

بیشتر اوقات ، این بستر عالی برای ساختن وب سایت است. تعادل کاملی بین پیچیدگی و سهولت استفاده دارد و اساساً قابل تنظیم و بی پایان است.

انیمیشن وردپرس

همچنین ، در حال حاضر محبوب ترین پلت فرم وب سایت از همه آنها است. همانطور که توسط خالق WordPress به اشتراک گذاشته شده است – مت مولدنوه – وردپرس اکنون 25٪ از کل اینترنت را تأمین می کند. آیا همه آن افراد می توانند اشتباه کنند?

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

برای شروع ، احساس راحتی کنید که یکی از این مسیرها را دنبال کنید:

a) “مسیر شروع سریع”

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

b) “مسیر عمیق”

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

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

جوملا و دروپال

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

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

در بعضی مواقع ، بسته به پیچیدگی پروژه شما ، ممکن است آنها زمان بسیار بیشتری برای مستر شدن و تلاش زیادی در این زمینه داشته باشند.

برای آموزش های عمیق تر ، دوره های بسیار جذاب در Lynda.com وجود دارد ، هم برای جوملا و دروپال.

چیزهایی که بعد از این فصل آماده است:

  • اولین پیش نویس وب سایت شما کاملاً ساخته شده است ، مهم نیست که تصمیم به استفاده از وردپرس یا برخی از سیستم عامل های دیگر داشته باشید.
  • مطمئن شوید که مطابق با اهداف اولیه شما ، مخاطبان هدف است و UX خوبی را ارائه می دهد.

فصل 7: طراحی پاسخگو موبایل

بیش از 60٪ مردم از موبایل و تبلت برای مرور وب استفاده می كنند

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

در اینجا کل مسئله چیست:

در اصل ، در حال حاضر ، تعداد بیشتری از افراد از دستگاه های تلفن همراه برای دسترسی به وب نسبت به گذشته استفاده می کنند. در واقع ، تخمین زده می شود که اکنون تعداد کاربران اینترنت تلفن همراه بیشتر از کاربران اینترنت دسک تاپ (75.1٪ در مقابل 52.7٪).

اما مشکلی وجود دارد.

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

برخی از مشکلات رایج عبارتند از:

  • قلم ها خیلی کوچک هستند,
  • طرح به خودی خود به هیچ وجه در صفحه کوچکتر تنظیم نمی شود,
  • یا فناوری مورد استفاده برای ساخت سایت در دسترس نیست.

اینجاست که ایده پاسخگویی به موبایل به اجرا در می آید.

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

در اینجا توضیحی بهتر وجود دارد: The Heck چیست طراحی وب پاسخگو?

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

اگر مشکلی وجود دارد ، باید آنها را برطرف کنید.

برخی از راه حل ها:

  • طراحی وب پاسخگو – چگونه
  • چگونه می توان وب سایت را در حدود 15 دقیقه پاسخگو کرد

فصل 8: همه را با هم جمع کنید

شما اصول را می دانید ، اکنون نوبت شماست

نگه دارید ، ما تقریباً آنجا هستیم!

این آخرین فصل از سفر کاملاً طولانی ما است.

در این مرحله ، باید نخستین وب سایت خود را بسازید … آن را با WordPress ، HTML / CSS دست ساز ، برخی از سازندگان وب سایت یا هر ابزار دیگری که برای کار انتخاب کرده اید ، باشد..

خلاصه اینکه کنگره! اما هنوز هم چند کار ارزش انجام وجود دارد:

  • مواردی را که در بخش های 1 و 2 مورد بحث قرار گرفته است ، دوبار بررسی کنید. اطمینان حاصل کنید که اهداف در واقع برای کاربر نهایی کار می کنند ، و اینکه وب سایت سردرگم نیست.
  • ساختار کد خود را از طریق سرویس اعتبار سنجی W3C تأیید کنید.
  • بررسی کنید که آیا مشکل امنیتی در سایت وجود ندارد یا خیر. برای این کار از اسکنر Sucuri استفاده کنید.
  • از جامعه بازخورد دریافت کنید. آنچه افراد دیگر در مورد کار شما فکر می کنند را بررسی کنید. تالار گفتمان در Sitepoint می تواند خوب باشد.

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

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

در آخر ، ما کنجکاو هستیم … بزرگترین چالش شما هنگام ایجاد وب سایت ، توسعه وب یا طراحی چیست؟ لطفاً در نظرات یا از طریق توییتر به اشتراک بگذارید. همه گوشیم!

با تشکر از خواندن ، شما بسیار جذاب هستید!

  • Total116
  • Facebook116
  • توییتر0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map