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

قبل از شروع کار: برنامه ریزی

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

برای شروع لازم هست که به سوالات زیر پاسخ دهید:

  1. وب سایتتان در مورد چیست؟ حیوانات را دوست دارید یا،شهر اصفهان، یا بازی شبگرد؟
  2. در مورد این موضوع چه اطلاعاتی را رائه می کنید؟ یک عنوان و چندتا پاراگراف بنویسید، و بعد از آن در مورد تصویری فکر کنید که می خواهید در صفحه خود نمایش دهید.
  3. به صورت خیلی کلی، وب سایت شما چه شکلی است. رنگ پس زمینه چه شکلی است؟ چه سبکی از فونت مناسب کار شماست: رسمی، کارتونی، ضخیم و شلوغ، ظریف.

توجه: پروژه های خیلی پیچیده به دستورالعمل (guidelines) جزئی تری نیاز دارند که تمامی جزئیات مربوط رنگها، فونت ها، فاصله بین موارد داخل صفحه، حالت مناسب نوشته ها، و ... را تعیین کند. گاهی اوقات آن را راهنمای طراحی (design guide) یا کتاب برند (brand book) می گویند، که می توانید نمونه از آن را در دستورالعمل های سیستم عامل فایرفاکس (Firefox OS Guidelines)  ببینید.

طراحی خود را بکشید

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

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

تیم های وب اغلب شامل هم یک طراح گرافیکی و یک طراح user-experience (UX) هستند. طراح های گرافیکی یا graphic designers، مشخص است که چه کاری انجام می دهند، قرار دادن اجزاء وب سایت کنار یکدیگر. طراحان UX نقش تا حدودی انتزاعی تری دارند که باید به تجربه کاربران و نحوه تعامل آنها با وب سایت بپردازند.

منابع خود را تعیین کنید

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

متن

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

قالب رنگ

برای انتخاب رنگ، به قسمت  انتخاب کننده رنگ(the Color Picker) رفته و رنگ مورد نظر خود را پیدا کنید. هر زمان که بر روی رنگی کلیک می کنید، یک کد شش حرفی عجیب شبیه #660066 را می بینید. به این کد هگز (دسیمال) گفته می شود و نشان دهنده رنگ شماست. این کد را فعلاً در جای مطمئنی کپی کنید.

تصاویر

برای انتخاب یک تصویر، به تصاویر گوگل (Google Images) رفته و چیز مناسبی را جستجو کنید.

  1. وقتی تصویر مناسبی را پیدا کردید، روی آن کلیک کنید.
  2. کلید View image را بزنید.
  3. در صفحه بعدی روی تصویر راست کلیک کنید (در مکینتاش از Ctrl + click استفاده کنید) و Save Image As... را انتخاب کنید،  و بعد از آن مکان مناسبی را برای ذخیره تصویر خود انتخاب کنید. علاوه بر آن، آدرس وب تصویر را هم از قسمت آدرس بار مرورگر، برای استفاده های بعدی کپی کنید.

Note: Most images on the Web, including in Google Images, are copyrighted. To reduce your likelihood of violating copyright, you can use Google's license filter. Just 1) click on Search tools, then on 2) Usage rights:

فونت

برای انتخاب فونت:

  1. به گوگل فونت(Google Fonts) بروید و در لیست فونت مورد نظر خود را پیدا کنید. برای اعمال فیلترهای بیشتر بر روی نتایج می توانید از قسمت سمت راست استفاده کنید.
  2. بعد از انتخاب فونت بر روی آیکن "بعلاوه" (Add to) کلیک کنید.
  3. در پنل پایین صفحه بر روی کلید  "* Family Selected" کلیک کنید ("*" بستگی به این دارد که چه تعداد فونت انتخاب کرده باشید).
  4. در پنجره ظاهر شد یا به اصطلاح popup box ، می توانید کدهای Google  را ببینید که برای استفاده های آینده آنها را کپی و ذخیره کنید.

 

Document Tags and Contributors

 Contributors to this page: Mahdi-Abedi
 Last updated by: Mahdi-Abedi,