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

در ابتدا باید بدانیم که یک “فرآیند” دقیقا چیست ؟! فرآیند مجموعه مراحلی است که برای پیش بردن یک کار یا پروژه مورد استفاده قرار میگیرد تا کار تکمیل شود و به پایان برسد . در واقع فرآیند طراحی وب مانند یک نقشه و راهنما می باشد تا کار راحت تر و سریع تر انجام شود . در ادامه مقاله به مراحل یک فرآیند نمونه اشاره خواهیم کرد…

مراحل یک فرآیند نمونه

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

1- برنامه ریزی

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

- بررسی الزامات

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

- چارت پروژه

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

- نقشه سایت

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

- قرارداد ، که در آن در مورد مسائل مالی ، حق کپی رایت نوشته شده است

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

- گرفتن دسترسی به سرور و ایجاد ساختار پوشه ها

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

- تعیین نرم افزارها و منابع مورد نیاز (تصاویر ، فونت ها و…)

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

منابع :

- Jumpchart: Client/developer collaboration tool
- Dropbox: File-sharing and collaboration tool
- Mindmeister: Free online mind-mapping software
- Writing Bulletproof Web Design Contracts

2- طراحی

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

- جزئیات و عناصر برنامه ریزی

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

- مدل های مبتنی بر تجزیه و تحلیل درخواست ها

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

- بازبینی و بررسی

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

- تکه تکه کردن و کد نویسی HTML/CSS

در این مرحله طرح نهایی در فتوشاپ برش می خود و سپس روی آن با استفاده از زبان های HTML و CSS و همینطور در صورت نیاز jQuery و… کدنویسی می شود . در این قسمت باید مدل ها را پس از کدنویسی آزمایش کنید .

منابع :

Printable Sketch Templates for Wireframing
Color Scheme Designer
Type Tester, font comparison
iPlotz, online template and wireframing tool

3- توسعه

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

- ساخت چهارچوب توسعه

در این مرحله باید زبان و روش نوشته شدن سیستم را انتخاب کنید . مثلا می خواهید با استفاده از Ruby ، PHP ، ASP و … سیستم را بنویسید . این قسمت زمانی است که باید سیستم را پیاده سازی و اجرا کنید . باید شرایط سرور را بسنجید و سیستم را متناسب با شرایط سرور توسعه دهید .

- کدنویسی قالب برای صفحات مختلف

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

- توسعه و تست ویژگی ها و امکانات خاص

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

- پر کردن با محتوا

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

- تست و بررسی لینک ها و عملکرد آنها

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

منابع :

Wufoo, form generator
Adobe Browserlab, cross-browser analysis
Choosing the Right Web Platform

4- راه اندازی

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

- انتقال به سرور زنده

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

- تست کردن

در این قسمت کار تست نهایی وب سایت را انجام می دهید . همانطور که در قسمت های قبل تر گفته شد ، باید لینک های مشکل دار ، تصاویر و … را تست و رفع مشکل کنید .

- تست نهایی Cross-Browser بودن (مرورگرهای موزیلا ، اپرا ، IE ، سافاری ، کروم ، گجت ها و گوشی های تلفن همراه)

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

منابع :

W3C Validation (HTML, CSS)
Adobe Browserlab, cross-browser analysis

4- اسناد فرآیند

در هر طراحی ، یک نسخه برای خود و یک نسخه برای مشتری تهیه کنید . می توانید از نسخه خود برای نمایش نمونه کار و… استفاده کنید .

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