آموزشآموزش HTML5طراحی سایت

آموزش طراحی سایت – قسمت سوم

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

منظور از درک پروژه اینست که نیازها و موارد مربوط به ارائه یک طرح را باز کنیم و جزء به جزء آن را همانند قطعات یک پازل در کنار هم بگذاریم و پس از ارائه یک طرح اولیه سپس تصمیم گیری کنیم که از کجا باید کار آغاز شود.

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

اجازه بدهید در این خصوص یک مثال تصویری به شما نشان بدهم.

به تصویر زیر دقت کنید:

web design learning-S01E03-exp

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

یک مثال برای درک پروژه و ارائه اولیه:

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

راهکارهای درک پروژه و ارائه طرح اولیه

برای درک پروژه و ارائه پیشنمایش قبل از هر چیز شما باید به اندازه کافی به کدهای HTML و استایل های آن واقف باشید. که این امر تنها با تمرین و تمرین بدست خواهد آمد. لذا در جلسات آینده این موارد را موشکافانه خدمتتان ارائه خواهیم کرد.

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

اجازه بدهید مثالی بزنیم تا کمی بهتر مسأله را درک کنید.

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

  1. اندازه صفحه چقدر باشد؟
  2. رنگ یا عکس پس زمینه چه باشد؟
  3. آیا نیاز به هدر یا سرصفحه دارید؟
  4. آیا نیاز به طراحی و قرار گیری لوگو دارید؟
  5. چه نوع فونتی دوست دارید؟
  6. آیا نیاز به هاست یا فضای میزبانی دارید؟
  7. آیا صفحه شما مربوط به فروش یک محصول است؟
  8. آیا نیاز به صفحات جانبی مانند تماس با ما دارید؟
  9. تا چه میزان مایلید هزینه کنید؟

و سوالاتی از این قبیل…

البته اضافه کنم بعدها که با php و asp اشنا خواهید شد، این موارد به مراتب پیچیده تر هستند زیرا شما با مشتریانی سر و کار خواهید داشت که سفارشات پیشرفته و حرفه ای خواهند داشت مانند فروشگاه آنلاین و…. که نیازمند محاسبات دقیق و کارگروهی میباشد.

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

روش اول: (روش مبتدی)

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

روش دوم: (روش نیمه حرفه ای)

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

روش سوم: (روش حرفه ای)

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

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

موفق باشید.

بهنام رحیمی نژاد

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

یک نظر

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی * Time limit is exhausted. Please reload the CAPTCHA.

دکمه بازگشت به بالا
بستن
بستن

Adblock رو غیر فعال کنید

بخشی از درآمد سایت با تبلیغات تامین می شود لطفا با غیر فعال کردن ad blocker از ما حمایت کنید