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

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

  1. شناسایی هدف: این که کجا با مشتری کار می کنم برای تعریف این که سایت چه اهدافی را باید دنبال کند.
  2. تعریف محدوده: به محض این که ما اهداف سایت را بدانیم، می توانیم محدوده ی پروسه را نیز بدانیم، این که سایت چه صفحات و ویژگی هایی را نیاز دارد تا به هدف برسد وهمچنین طراحی یک جدول زمانی برای ساخت آنها.
  3. نقشه ی سایت و خلق شماتیک صفحات: با تعریف درست محدوده، می توانیم کنکاش در نقشه ی سایت را شروع کنیم و چگونه محتوا و ویژگی هایی که در محدوده توصیف کرده ایم به هم خواهند پیوست.
  4. خلق محتوا: حالا که تصویر بزرگ تری از سایت را در ذهن داریم، با بهینه سازی همیشگی موتورهای جست و جو تا صفحات روی یک موضوع خاص متمرکز بمانند، می توانیم خلق محتوا را برای تک تک صفحات شروع کنیم. در مرحله ی بعدی این موضوع حیاتی است که محتوای واقعی برای کار کردن داشته باشیم.
  5. عناصر بصری: با معماری سایت و محتوای مرتبط، می توانیم کار روی برند بصری را شروع کنیم. بسته به مشتری، ممکن است این موضوع از قبل مشخص شده باشد، اما ممکن است از ابتدا استایل بصری را تعریف کنید. ابزاری مانند کاشی های استایل دهی، بوردهای حال و هوا و ترکیب عناصر می تواند به این فرآیند کمک کند.
  6. تست کردن: تا این لحظه، شما تمام صفحاتتان را دارید و تعریف کرده اید چگونه به بازدید کنندگان سایت نشان داده شوند، حالا زمان آن رسیده است که اطمینان حاصل کنید همه ی آنها کار می کنند. جست و جوی دستی سایت را روی بازه ی گسترده ای از ابزارها با خزندگان سایت اتومات شده ترکیب کنید تا هر چیزی از مسائل مرتبط با تجربه ی کاربری تا شکستگی ساده ی لینک ها شناسایی شود.
  7. راه اندازی: همین که هر چیزی به خوبی شروع به کار کرد، زمان برای برنامه ریزی و اجرای راه اندازی سایت فرا رسیده است که باید شامل برنامه ریزی برای راه اندازی و استراتژی های ارتباطی باشد، یعنی شما چه زمانی راه اندازی می کنید و چگونه دیگران در جریان آن قرار می گیرند. بعد از آن باید حباب را بشکنید.


1- شناسایی هدف

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

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


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

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

ابزار برای تعریف محدوده

• یک قرارداد
• چارت Gannt (یا تجسم دیگر جدول های زمانی )
3- نقشه ی سایت و ماکت اسکلت بندی

نقشه ی سایت پایه ای برای هر وبسایت خوب طراحی شده فراهم می کندو کمک می کند طراحان وب ایده ی شفافی از معماری اطلاعات وبسایت پیدا کنند و ارتباطات بین صفحات مختلف و عناصر محتوا را توضیح می دهد.
ساختن یک سایت بدون نقشه ی سایت مانند ساختن یک ساختمان بدون طرح است و به ندرت خوب از کار در می آید.
گام بعدی ساختن ماکت اسکلت بندی است. اسکلت بندی ها چارچوبی را برای ذخیره ی طراح بصری سایت و عناصر محتوا فراهم می کنند و می توانند به شناسایی چالش های بالقوه و شکاف های نقشه ی سایت کمک کند.
اگرچه یک اسکلت بندی شامل هیچ یک از عناصر طراحی نهایی نیست، اما به عنوان یک راهنما برای اینکه در نهایت سایت چگونه به نظر میرسد، عمل می کند. برخی طراحان از ابزار روان کننده ای مثل Blasamiq و webflow برای خلق چارچوب هایشان استفاده می کنند. من به شخصه دوست دارم که به ابتدای کار برگردم و مداد و کاغذ استفاده کنم.
ابزار برای نقشه کشی سایت و اسکلت بندی
• مداد/خودکار و کاغذ
• Balsamiq
• Moqups
• Sketch
• Axure
• Webflow
• Slickplan
• Writemaps
• Mindnode
4- خلق محتوا

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

هدف اول: محتوا درگیر شدن و اقدام را هدایت می کند.
ابتدا محتوا خواننده را درگیر می کند و آنها را برای اقدام ضروری برای رسیدن به اهداف سایت هدایت می کند. این موضوع تحت تاثیر خود محتوا (نوشته) و این که چگونه ارائه میشود (تایپوگرافی و عناصر ساختاری )است.
پروسه ی طولانی، بی روح و کسل کننده به ندرت توجه بازدید کنندگان را برای مدت طولانی جلب می کند. محتوای با روح، کوتاه و جذاب آنها را اسیر می کند و وادارشان می کند صفحات مختلف را کلیک کنند. حتی اگر صفحات شما نیاز به محتوای زیادی داشته باشند – که اغلب دارند- تکه بندی درست آن با تقسیم آن به پاراگراف های کوتاه تکمیل شده باجلوه های بصری می تواند به داشتن حس روشن و دلمشغول کننده کمک کند.
هدف دوم: بهینه سازی موتور های جست و جو
همچنین محتوا دیده شدن سایت برای موتور های جست و جو را بهبود می بخشد. تمرین خلق کردن و بهبود محتوا برای داشتن رتبه ی خوب در جست و جو تحت عنوان بهینه سازی موتورهای جست و جو شناخته می شود.
داشتن کلمات کلیدی و عبارات کلیدی درست برای موفقیت هر وبسایتی ضروری است. من همیشه از Google Keyword Planner استفاده می کنم. این ابزار نشان می دهد که حجم جست و جو برای کلمات و عبارات کلیدی مورد هدف بالقوه چقدر است، بنابراین شما می توانید روی آن چه انسانهای واقعی در اینترنت جست و جو می کنند متمرکز شوید. در حالی که موتورهای جست و جو باهوش تر می شوند، استراتژی های محتوای شما هم باید باهوش تر شوند. Google Trends هم برای شناسایی عباراتی که مردم واقعا در هنگام جست و جو استفاده می کنند کاربردی است.
فرآیند طراحی من روی طراحی وب سایت ها حول محور SEO می چرخد. کلمات کلیدی ای که شما می خواهید برای رتبه بندی مورد استفاده قرار بگیرند باید در تگ عنوان قرار بگیرند – هر چه به شروع نزدیک تر، بهتر. کلمات کلیدی همچنین باید در تگ H1، meta description و بدنه ی محتوا ظاهر شوند.
محتوایی که خوب نوشته شده باشد، حاوی اطلاعات و غنی از کلمات کلیدی باشد، برای انتخاب شدن توسط موتورهای جست و جو بهتر است و تمام این ها کمک میکند وبسایت آسان تر پیدا شود.
بطور معمول، مشتری شما حجمی از محتوا را تولید میکند، اما توجه به این نکته حیاتی است که شما آنها را با راهنمایی اینکه با چه کلمات و عبارات کلیدی ای بیایند، پشتیبانی کنید.
ابزار های جذاب خلق محتوا

  • Google Docs
  • Dropbox Paper
  • Quip
  • Gather Content

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

  • Google Keyword Planner
  • Google Trends
  • Screaming Frog’s SEO Spider

5- عناصر بصری

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

  • مظنونین همیشگی ( Sketch Illusterator,Photoshop,)
  • کاشی های استایل دهی، بورد های حال وهوا و ترکیب عناصر
  • راهنماهای استایل بصری

6- تست کردن

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

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

  • W3C Link Checker
  • SEO Spider

7- راه اندازی

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