وبلاگ چیتا وب


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

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

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

  3. با مشتری هایتان صحبت کنید و ایده هایشان را بشنوید
  4. customer

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

  5. افکارتان را بر روی کاغذ پیاده کنید
  6. thoughts

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

  7. ایجاد نقشه سایت و چارچوب
  8. site map

    نقشه سایت پایه و اساس هر وب سایت خوب طراحی شده است. این روش به طراحان یک ایده روشن از اطلاعات معماری وب سایتشان می دهد وهمچنین ارتباط بین صفحات مختلف و عناصر محتوا را توضیح می دهد، ساختن یک سایت بدون نقشه ( sitemap) شبیه یک خانه ی بدون طرح است .
    قدم بعد ساختن یک چارچوب است، Wireframe ها چارچوبی برای ذخیره سازی طراحی بصری سایت است که عناصر محتوا را فراهم، چالش های بالقوه را شناسایی و به نقشه سایت کمک می کنند. این ها تصاویر اولیه از ساختار و اجزای یک صفحه وب است که به طور کلی اولین گام در فرآیند طراحی هستند، اگر چه یک Wirefram حاوی هیچ یک از عناصرنهایی طراحی نیست، اما به عنوان یک راهنما عمل می کند، برای اینکه به شما نشان دهد، در نهایت سایت چگونه به نظر خواهد رسید .
    نرم افزار MockFlow یک برنامه ترکیبی آنلاین و آفلاین است که برای ایجاد wireframes از آن استفاده می شود، شامل یک کتابخانه بزرگ از اجزا و عناصر مختلف برای طراحی است .
    Pencil یک افزونه برای فایرفاکس است که بر روی مرورگر کار می کند و شامل ابزارهای استاندارد برای نقاشی و ترسیم انواع طرح ها و نمونه های اولیه به صورت wireframes یا prototypes است .

  9. یک شبکه اضافه کنید
  10. grid

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

  11. تایپو گرافی خود را انتخاب کنید
  12. typography

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

  13. رنگ تم مورد نظرتان را انتخاب کنید
  14. scheme

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

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

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

  19. نمونه اولیه، نمونه اولیه، نمونه اولیه
  20. prototype

    منظور از Prototypes نمونه های اولیه و طرح بندی کلی یک صفحه وب است. نمونه اولیه یا Prototype معمولا به صورت HTML/CSS یا ترکیبی از هر دو ساخته شده و به مشتری نمایش داده می شود. شاید این مرحله از طراحی نتواند انتظارات یک مشتری را برآورده سازد، اما روند کار و شبیه سازی صفحات وب را برای کارفرما میسر کرده و یک طرح نهایی از کار را نمایش می دهد .
    نمونه سازی اولیه یعنی ساختن یک مدل از وب سایت قبل از ساخت یک وب سایت واقعی، نمونه سازی بهترین روش برای آزمایش تعاملات و تکنولوژی است، ابزارهای زیادی برای نمونه سازی وجود دارد که امروزه آن را آسان می کند و شما به یک معلم برنامه نویسی برای ایجاد یک نمونه اولیه نیاز نخواهید داشت،درواقع روش دیگری است که شما می توانید مشتریان خود را هیجان زده کنید، این مرحله ضروری است زیرا ارزیابی می کند که آیا وب سایت مطابق با نیاز ها و انتظارات مشتریان است یا خیر ؟! شما حتی می توانید نمونه اولیه را با کاربران خود به اشتراک بگذارید تا تعامل و تجربه کاربر را تست کنید .
    برخی از طراحان مایل به طراحی نمونه های اولیه خود در فتوشاپ هستند، در حالی که اغلب آن ها فتوشاپ را کنار گذاشته و از یک چارچوب وب، مانند InVision و UXpin استفاده می کنند .

  21. هر مرحله را ارزیابی کنید و بازخورد بگیرید
  22. feedback

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

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

  25. آزمایش کنید
  26. اگر تمام صفحاتتان را طراحی کرده اید بهتر است نحوه نمایش آن ها را به بازدید کنندگان سایت نشان دهید در واقع زمان آن رسیده است که مطمئن شوید همه صفحات کار می کنند .

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

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

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

منبع:

webdesign.tutsplus.com www.creativebloq.com

  • این مطلب را به اشتراک بگذارید

about author

محدثه قاسمی

SEO at cheetahwen.ir

فارغ التحصیل مهندسی صنایع، مترجم و متخصص در زمینه تجارت الکترونیک و بازاریابی نوین

دیدگاه ها

دیدگاهی بگذارید: