اصول و پیش نیازهای طراحی وب سایت

یکشنبه, ۱۵ام دی , ۱۳۸۷ | ۶۵ دیدگاه

امروز قصد داشتم در ادامه آموزش ” طراحی قالب سایت در فتوشاپ” قسمت دوم این خودآموز و نحوه تبدیل قالب سایت در فرمت psd به html رو آموزش بدم اما دیدیم قبل از شروع این خودآموز یک سری نکات هست که حتما باید به آنها اشاره کنم

همواره به خاطر داشته باشید که روشهای گوناگونی برای طراحی وب سایت وجود دارد و روش فوق تنها یکی از روشهای موجود میباشد و به هیچ عنوان بهترین یا برترین آنها نمیباشد :

در طراحی قالب سایت بهتر است مراحل زیر را قبل از اینکه سراغ Photoshop بروید خود را برای طراحی قالب آماده کنید در نظر بگیرید  :

۱-نیازسنجی (مهمترین قسمت پروژه)

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

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

۲- ابزار سنجی

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

۳-تهیه Porposal

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

۴-پیاده سازی و اجرای

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

شما باید بدانید که قالب یک سایت با توجه به حجم کار و نیاز مشتری میتوانید شامل ۴ یا ۵ بخش و به شکل زیر باشد :

۱-Header

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

۲-Navigation Bar

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

۳-Slide Bar

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

۴-Content Bar

در این قسمت توضیحات مربوط به هر صفحه قرار میگیرد

۵-Footer

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

نکته مهم : سایت با توجه به حجم اطلاعات میتواند دارای ۲ Navigation Bar باشد . اما اگر حجم صفحات و تعداد آنها  کم میباشد  از بین بخش ۲ و ۳ بهتر است ای یکی از آنها استفاده نمایید.یعنی Navigation Bar شما یا افقی باشد یا عمودی.

بعد از مشخص شدن اینکه لایه بندی سایت شما به چه ترتیبی خواهد بود باید ۲ یا ۳ عدد قالب برای مشتری طراحی کنید. در قسمت آینده ” نحوه طراحی قالب سایت در فتوشاپ” نحوه تبدیل قالب تهیه شده در فرمت PSD به HTML را به شما عزیزان آموزش خواهیم داد. اما بدانید که لازم است قبل از شروع هر کاری در باره آن کار و ویژگیهای آن بطور کامل تحقیق و توسعه بعمل بیاورید تا از برگشتها و دوباره کاریها اجتناب نمایید .

Be Sociable, Share!


۶۵ دیدگاه


  1. abbas
    ۱۹ دی ۱۳۸۷

    سپاسگزار از آموزش های مفید و با ارزشتون. یا حق




  2. hanif
    ۲۵ دی ۱۳۸۷

    prefect !




  3. ابراهیم
    ۵ اسفند ۱۳۸۷

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




  4. اوين
    ۱۴ اسفند ۱۳۸۷

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




  5. حسين
    ۱۹ اسفند ۱۳۸۷

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




  6. منصور
    ۱ فروردین ۱۳۸۸

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




  7. صادق
    ۱۸ فروردین ۱۳۸۸

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




  8. بهنام
    ۱۱ خرداد ۱۳۸۸

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




  9. kimia
    ۱۶ تیر ۱۳۸۸

    لطفا لینک ثبدیل پسوند psd به html را برامون بگذارید.




  10. تورج
    ۲۰ مرداد ۱۳۸۸

    من مبتدی هستم می خواهم بدانم که با این اموزشها ایا من بدون کمک می توانم یک سایت دینامیکی بسازم و از کار خود لذت ببرم یا نه این برای حرفه ای ها می باشد




  11. کامران
    ۲۰ مرداد ۱۳۸۸

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




  12. ثمره
    ۳۰ شهریور ۱۳۸۸

    سلام
    خیلی سایت خوبی دارید مطالب غنی آن را عالی تر کرده
    واقعا استفاده کردم




  13. کامران
    ۳۰ شهریور ۱۳۸۸

    خدا رو شکر که استفاده کردید
    ممنونم




  14. m
    ۷ مهر ۱۳۸۸

    خیلی عالیه لطفا ادامه بدید!




  15. دنيا
    ۲۴ مهر ۱۳۸۸

    دست مریضا واقعا عالیه
    مرسی و خسته نباشید




  16. میلاد
    ۱۰ آبان ۱۳۸۸

    تشکر فراوان




  17. فرشاد
    ۱۳ آبان ۱۳۸۸

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




  18. امید
    ۲۹ آبان ۱۳۸۸

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




  19. samad
    ۷ آذر ۱۳۸۸

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




  20. مهسا
    ۷ آذر ۱۳۸۸

    سلام واقعا عالی بود




  21. رضا
    ۹ آذر ۱۳۸۸

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

    با سپاس فراوان – رضا




  22. کامران
    ۹ آذر ۱۳۸۸

    رضا جان ممنون از لطفت
    باید بگم که جواب این سئوالت به این سادگی و کوتاهی نیست و خودش در ۲ الی ۳ پست میگنجه
    اما بهتره برای شروع از این مواردی که در اینجا ذکر کردم شروع کنی. اگر میخوایکار رو شروع کنی یک بلاگ وردپرس راه بنداز.من هم چندین سال پیش با وبلاگ شروع کردم




  23. جهان
    ۲۱ آذر ۱۳۸۸

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




  24. fAmE
    ۲۴ دی ۱۳۸۸

    سلام
    ممنون از آموزشاتون
    میتونم بپرسم من از کجا موتونم CIWبگیرم؟؟؟
    اموزشگاه خاصی رو معرفی میکنید؟!
    و دیگه اینکهو همچنان منتظر طریقه تبدیل psd to htmlهستماااااااا




  25. علیرضا
    ۱۴ بهمن ۱۳۸۸

    سلام…وب سایت جالبی دارین و مطالب خوب…ولی اگه مطالب اموزشی به همراه یه فایل pdf جهت دانلود بود خیلی بهتر میشد… ممنون




  26. masoud
    ۲۷ بهمن ۱۳۸۸

    دمتون گرم



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




  28. lianiran
    ۲۴ فروردین ۱۳۸۹

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



دیدگاه خود را بنویسید