مرحله 2: مدل سازی (wireframes)

در مرحله مدل سازی طراحی سایت ، برای هر صفحه خاص وب، wireframe های پیکرنمای ساکنی ساخته می شوند. برای ساخت wireframes باید از یکی از دو مورد زیر استفاده کرد:

• کاغذ و خودکار
• نرم افزار های پیکر نمایی مثل Adobe Photoshop یا انتخاب شخصی ما، OmniGraffle Professional.

این wireframe ها شامل، اسکلت ساختار ابتدایی می باشند که طرح یک صفحه وب خاص را نشان می دهد. علامت تجاری کجا قرار می گیرد؟ محتویات در کجا قرار می گیرند؟ آیا Breadcrumb (یک نوع راهیابی دسته دوم که مکان کاربر را در سایت نشان می دهد.) وجود دارد؟ آیا شما قسمتی برای Login کردن دارید؟ هر کدام از این سوالات ( و خیلی سوالات دیگر) در این مرحله پاسخ داده می شوند. چند چیز که موقع ساخت wireframe ها باید در نظر گرفت عبارتند از:

• مطمئن شوید تا از تمام عوامل مهم استفاده می کنید. (علامت تجاری، راهیابی، محل قرار گیری محتویات، محل قرار گیری عکس / فیلم ها، پنجره ی Login، پنجره جستجو در سایت، Breadcrumb، ....)
• Flowchart های که در مرحله اول ساخته اید، ارجاعدهید.
• از گرافیک استفاده نکنید. Wireframe ها باید ابتدایی باشند (بدون زرق و برق): از پنجره ها / دایره ها برای نشان دادن محل قرار گیری محتویات استفاده کنید.
• برای مشخص کردن عوامل فقط از متن استفاده کنید، از متن اصلی که دارای آیتم های مثل نت و عنوان است، استفاده نکنید. (آن برای مرحله 3 است.)
• بر روی یک طرح ساده، خوب برنامه ریزی شده که استفاده از آن راحت است تمرکز کنید؛ از طرح های بهم ریخته و شلوغ دوری کنید.

مرحله 3: اعدام

سومین مرحله از پروسه طراحی سایت حرفه ای شامل:

1. ساخت رابط گرافیکی کاربران (GUI) که همچنین به نام طراحی هم شناخته می شوند.
2. ساخت محتوا
3. تبدیل طراحی سایت از عکس به کد، که مرورگران وب از آن برای نشان دادن وب سایت شما بر روی اینترنت استفاده می کنند.

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

به ما اعتماد کنید، پروسه آن را بی نقص می کند.

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

ساخت یک سایت حرفه ای

برخی احتیاط ها در طراحی 

بهینه سازی  برای ابزارهای جست وجو

استفاده از تگ html 

ناوبری در طراحی