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

[dreadful]

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

سوال 1: اول از همه می خوام بپرسم که برای حرفه ای شدن توی این کار باید اصول خاصی رو بدونیم، مثلا رشته گرافیک تحصیل کرده باشیم !؟ یا کار به صورت سلیقه ای انجام میشه و اصول طراحی خاصی نداره ! (مثلا خودم رشته ریاضی تحصیل کردم و همینجوری واسه خودم طراحی ای میکنم!! )

سوال 2: بعد از اون می خوام بدونم دوستان چطوری کار رو انجام میدن ؟
برای مثلا خودم :

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





بعد از اون روی یه کاغذ طرح اصلی سایتمو با مداد میکشم (فکر کنم بهش میگن اسکچ!) مثل این که دیروز کشیدم :دی


http://dreadful.persiangig.com/sketch.png




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



سوال 3: برای طراحی ریسپانسیو باید توی این مرحله 2 نوع سایت طراحی کنم؟ (دسکتاپ وگوشی )

سوال 4: خوب سوال دیگه ام اینجاست که باید از کجا رنگ های مناسب واسه طراحی ام رو انتخاب کنم ؟ سایتایی مثل paletton.com (http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) رو دیدم ولی نمی فهمم باید از کدوم از اون تیپ ها استفاده کنم ؟!

+ طراح فتوشاپ این سایتم :
133224



بعد از اون با استفاده از html و css و javascript سایتم رو میارم بالا،


سوال 5: من برای نوشتن html و css اون ها رو با هم استفاده می کنم و از بالا تا پایین موازی کد html و css رو استفاده می کنم، ولی امروز یه آموزش دیدم که اون کل html صفحاتش ( home page - contact - و ... ) رو میزد و بعد میومد واسه همش یه css میزد ! شما چطوری کار می کنید ؟

سوال آخر 6: برای رسپانسو کردن سایت باید چی کار کنم ؟ از bootstrap استفاده کنم ؟ آموزش خوبی رو سراغ دارید ؟


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

[ikallam]

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

سوال 1: اول از همه می خوام بپرسم که برای حرفه ای شدن توی این کار باید اصول خاصی رو بدونیم، مثلا رشته گرافیک تحصیل کرده باشیم !؟ یا کار به صورت سلیقه ای انجام میشه و اصول طراحی خاصی نداره ! (مثلا خودم رشته ریاضی تحصیل کردم و همینجوری واسه خودم طراحی ای میکنم!! )

سوال 2: بعد از اون می خوام بدونم دوستان چطوری کار رو انجام میدن ؟
برای مثلا خودم :

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





بعد از اون روی یه کاغذ طرح اصلی سایتمو با مداد میکشم (فکر کنم بهش میگن اسکچ!) مثل این که دیروز کشیدم :دی


http://dreadful.persiangig.com/sketch.png




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



سوال 3: برای طراحی ریسپانسیو باید توی این مرحله 2 نوع سایت طراحی کنم؟ (دسکتاپ وگوشی )

سوال 4: خوب سوال دیگه ام اینجاست که باید از کجا رنگ های مناسب واسه طراحی ام رو انتخاب کنم ؟ سایتایی مثل paletton.com (http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) رو دیدم ولی نمی فهمم باید از کدوم از اون تیپ ها استفاده کنم ؟!

+ طراح فتوشاپ این سایتم :
133224



بعد از اون با استفاده از html و css و javascript سایتم رو میارم بالا،


سوال 5: من برای نوشتن html و css اون ها رو با هم استفاده می کنم و از بالا تا پایین موازی کد html و css رو استفاده می کنم، ولی امروز یه آموزش دیدم که اون کل html صفحاتش ( home page - contact - و ... ) رو میزد و بعد میومد واسه همش یه css میزد ! شما چطوری کار می کنید ؟

سوال آخر 6: برای رسپانسو کردن سایت باید چی کار کنم ؟ از bootstrap استفاده کنم ؟ آموزش خوبی رو سراغ دارید ؟


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

سلام من حرفه ای نیستم ولی بعضی از سوالات رو جواب میدم :D
روندی که من واسه طراحی سایت طی میکنم اینه
اول سایت رو تحلیل میکنم بعد رو کاغذ طرح رو میکشم
دیگه تو فتوشاپ اجرا نمیکنم یه راست میرم واسه اجرا !!!!
واسه رنگ بندی هم مطلب در مورد هارمونی رنگ ها بخون خودت دستت میاد چه طوری رنگ ها رو انتخاب کنی
- برای اجر هم باید این طور باشه کد های html رو داخل یه فایل میزاریم به تگ های id یا کلاس های خاصشون رو میدیم بعد داخل فایل سی اس اس تک تک اون ها رو تنظیم میکنیم
لزوما نیازی به استفاده از بوت استرپ نیس شما میتونی از meida query ها استفاده کنی ولی بوت استرپ دیگه درگیر استفاده از میدیا ها نیستی
موفق باشی

[r4hgozar]

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


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

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

[دانیال دزفولی]

بعد از یه سال پیدات شد :/ در کنج عزلت به سر میبردی ؟ D:

به نظر من ریسپانسیو اونقد بحث سختو بزرگی نیست
که همه یه طوری میگن ریسپانسیو:|

خیلی ساده میتونی با چند تا media query طوری ریسپانسیو کنی که توی همه ی مرور گر ها سایت بدون مشکل بالا بیاد


حجم بوت استرپ هم کم نیست و تاثیر کمی روی سرعت نداره !

[dreadful]

سلام من حرفه ای نیستم ولی بعضی از سوالات رو جواب میدم :D
روندی که من واسه طراحی سایت طی میکنم اینه
اول سایت رو تحلیل میکنم بعد رو کاغذ طرح رو میکشم
دیگه تو فتوشاپ اجرا نمیکنم یه راست میرم واسه اجرا !!!!
واسه رنگ بندی هم مطلب در مورد هارمونی رنگ ها بخون خودت دستت میاد چه طوری رنگ ها رو انتخاب کنی
- برای اجر هم باید این طور باشه کد های html رو داخل یه فایل میزاریم به تگ های id یا کلاس های خاصشون رو میدیم بعد داخل فایل سی اس اس تک تک اون ها رو تنظیم میکنیم
لزوما نیازی به استفاده از بوت استرپ نیس شما میتونی از meida query ها استفاده کنی ولی بوت استرپ دیگه درگیر استفاده از میدیا ها نیستی
موفق باشی

ممنون
پس من اشتباه کد میزنم، باید اول کل html رو بنویسم بعدش css !
واسه رنگ هم ممنون

[dreadful]

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


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

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

مرسی
فقط برای استفاده از بوت استرپ باید اول طراحی موبایل رو انجام بدم ؟! و باید 2 تا psd بزنم ؟ یعنی یک طراحی برای موبایل و یکی هم برای تبلت و مانیتور ها دیگه، درست میگم ؟

بازم ممنون

[dreadful]

بعد از یه سال پیدات شد :/ در کنج عزلت به سر میبردی ؟ D:

به نظر من ریسپانسیو اونقد بحث سختو بزرگی نیست
که همه یه طوری میگن ریسپانسیو:|

خیلی ساده میتونی با چند تا media query طوری ریسپانسیو کنی که توی همه ی مرور گر ها سایت بدون مشکل بالا بیاد

حجم بوت استرپ هم کم نیست و تاثیر کمی روی سرعت نداره !


بَه دانیال ! خوبی ؟!
چه کنیم دیگه ؟ جات خالی کنکور داشتم، دهنم سرویس شد :دی

آره خوب من تا حالا عرض رو میگرفتم 960 و میزدم، اکثرا خودش درست نشون میداد توی مانیتور ها، ولی خوب خواستم که توی مانیتور های بزرگتر تمام صفحه بشه، به هر حال بوت استرپ هم خفن به نظر میاد!
حجمی نداره بدبخت ! دان کردم یه فایل css بیست کیلوبایتی داده من :دی
فقط خیلی کند دارم پیش میرم !
آرزوی موفقیت، فعلا ;)

+سایتتم خوب شده، آورین !

[amirtc]

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

[r4hgozar]

مرسی
فقط برای استفاده از بوت استرپ باید اول طراحی موبایل رو انجام بدم ؟! و باید 2 تا psd بزنم ؟ یعنی یک طراحی برای موبایل و یکی هم برای تبلت و مانیتور ها دیگه، درست میگم ؟

بازم ممنون

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

مثل این سایت
http://rayancode.ir/

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

[dreadful]

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



خوب چرا از سبک های غربی استفاده نکنیم ؟ من خودم خیلی میرم توی سایت هایی مثل themeforest و کار های جدید یاد میگیرم و ازش الهام میگیرم توی طراحیم !سبک وطنی هم مگه داریم ؟!
با بقیه حرفاتون موافقم و ممنون :)

[amirtc]

دوست عزیز منظور نو اوری هستش یه نگاه به دورو ورت بنداز از هر 10 تا سایت 9 تاش قالب ریپ شده هستش! 1 دونشم طراحی اختصاصی مثلا زدن ! که همش کپی ! غربی یک کلمه بود !
شاید من بد بیان کردم اما این بحث ها مدت هاس که ادامه داره که نمونش فونت ها ، انیمیشن ها ، رنگ ها ، وووو...
الهام گرفتن چیز بدی نیست نه به حد افراط ! که امروز افراط شده الهام ! الهام گرفتن هم فقط یک کلمس واسه گولزدن خودت !
این بحث جاش اینجا نیست من هم بیشتر از این ادامه نمیدم.
در کل باید دستت به کار بره تاروش خودتو پیدا کنی !