تصویر نویسنده

۹ مهر ۱۳۹۹

0

۷ مرحله ساده در فرآیند طراحی وب

مقاله

طراحان وب اغلب با تمرکز بر موضوعات فنی مانند وایرفریم، کد و مدیریت محتوا در مورد فرآیند طراحی وب فکر می کنند.

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

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

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

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

برای من طراحی یک وب سایت به ۷ مرحله نیاز دارد:

  1. شناسایی هدف: جایی که من با مشتری کار می کنم تا تعیین کنم وب سایت جدید چه اهدافی را باید تحقق بخشد. به طور خلاصه، هدف آن چیست.
  2. تعریف دامنه: هنگامی که اهداف سایت را شناختیم، می توانیم دامنه پروژه را تعریف کنیم. یعنی سایت چه صفحات وب و ویژگی هایی برای تحقق هدف و جدول زمانی ساخت آن نیاز دارد.
  3. ایجاد نقشه سایت و وایرفریم: با دامنه ای که به خوبی مشخص شده باشد، می توانیم نقشه سایت را شروع کنیم و تعریف کنیم که چگونه محتوا و ویژگی هایی که در دامنه آوردیم به هم پیوند می خورند.
  4. ایجاد محتوا: اکنون که تصویری بزرگتر از سایت در ذهن داریم، می توانیم برای تک تک صفحات شروع به تولید محتوا کنیم، همیشه بهینه سازی موتور جستجو (SEO) را در ذهن داشته باشیم تا به تمرکز صفحات روی یک موضوع واحد کمک کنیم. داشتن محتوای واقعی برای موفقیت آمیز بودن مرحله بعدی بسیار حیاتی است:
  5. عناصر بصری: با وجود معماری سایت و برخی مطالب موجود، می توانیم روی ویژگی های بصری کار کنیم. بسته به مشتری، این ممکن است از قبل به خوبی تعریف شده باشد، اما همچنین ممکن است لازم باشد خودتان استایل بصری را از ابتدا تعریف کنید. ابزارهایی مانند style tiles, moodboards و element collages می توانند به این روند کمک کنند.
  6. آزمایش: تاکنون، همه صفحات خود را در دست دارید و نحوه نمایش آنها برای بازدید کننده سایت را مشخص کرده اید، بنابراین وقت آن رسیده است که از کارکرد همه آنها اطمینان حاصل کنید. مرور دستی سایت را در دستگاه های مختلف با crawler های خودکار سایت ترکیب کنید تا از مشکلات تجربه کاربری گرفته تا لینک های ساده خراب، اشکالات را شناسایی کنید.
  7. راه اندازی: وقتی همه چیز به زیبایی کار کرد، زمان آن فرا رسیده است که برنامه ریزی کرده و سایت خود را اجرا کنید! این باید شامل برنامه ریزی برای زمان راه اندازی و برای استراتژی های ارتباطی باشد – یعنی چه موقع راه اندازی می کنید و چگونه دنیا را مطلع می کنید؟ پس از آن، زمان عرضه رسیده است.

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

فرآیند طراحی وب در ۷ مرحله ساده

برای طراحی، ساخت و راه اندازی وب سایت خود، دنبال کردن این مراحل لازم است:

۱. شناسایی هدف

این مرحله اولیه برای این است که بفهمید چطور می توانید مشتری را کمک کنید.

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

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

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

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

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

  • مخاطبان
  • یک خلاصه خلاقانه
  • تحلیل رقبا
  • ویژگی های برند

۲. تعریف محدوده

یکی از شایع ترین و دشوارترین مشکلات گریبانگیر پروژه های طراحی وب، محدوده خزش (scope creep) است.

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

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

نمودار گانت
آناتومی یک نمودار گانت

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

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

  • یک قرارداد
  • نمودار گانت (یا تجسمی دیگر از جدول زمانی)

۳. ساخت نقشه سایت و وایرفریم

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

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

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

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

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

ابزارهای sitemapping  و  wireframing

  • مداد و کاغذ
  • Balsamiq
  • Moqups
  • Sketch
  • Axure
  • Webflow
  • Slickplan
  • Writemaps
  • Mindnode

۴. ایجاد محتوا

صفحه مربوط به گوگل ترندز

پس از ایجاد چارچوب وب سایت خود، می توانید با مهمترین جنبه سایت شروع کنید: محتوای نوشته شده.

محتوا دو هدف اساسی دارد:

هدف ۱. محتوا باعث ایجاد تعامل و عمل می شود

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

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

حتی اگر صفحات شما به محتوای زیادی احتیاج دارند – و غالباً نیز نیاز دارند – تقسیم این محتوا به پاراگرافهای کوتاه که با تصاویر همراه شده اند، می تواند به شما در حفظ احساس خوشایند و جذاب کمک کند.

هدف ۲. SEO

محتوا همچنین باعث افزایش دیده شدن سایت توسط موتورهای جستجو می شود. روش ایجاد و بهبود محتوا برای رتبه بندی خوب در جستجو به عنوان افزایش کارایی موتور جستجو یا SEO شناخته می شود.

استفاده صحیح کلمات کلیدی و عبارات کلیدی برای موفقیت هر وب سایت ضروری است. من همیشه از Google Keyword Planner استفاده می کنم.

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

Google Trends نیز برای شناسایی جملاتی که مردم در هنگام جستجو از آنها استفاده می کنند مفید است.

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

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

معمولاً مشتری شما عمده محتوای شما را تولید می کند، اما بسیار مهم است که وی را راهنمایی کنید که چه کلمات کلیدی و عباراتی را باید در متن وارد کند.

ابزار عالی تولید محتوا

  • Google Docs
  • Dropbox Paper
  • Quip
  • Gather Content
  • Webflow CMS (content management system)

ابزارهای مفید SEO

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

۵. عناصر بصری

یک استایل کاشی جالب!

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

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

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

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

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

ابزار برای عناصر بصری

  • مجرمین همیشگی! (Sketch, Illustrator, Photoshop, etc.)
  • Visual style guides

۶. آزمایش کردن

وقتی که سایت تمام تصاویر و محتوای خود را دارد، آماده آزمایش هستید.

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


من به شدت Screaming Frog SEO Spider را برای این مرحله توصیه می کنم. به شما امکان می دهد بسیاری از کارهای استاندارد بررسی را همه در یک ابزار انجام دهید و حداکثر برای ۵۰۰ آدرس اینترنتی رایگان است.

عناوین و توضیحات صفحه را یک بررسی نهایی کنید. حتی ترتیب کلمات در عنوان نیز می تواند بر عملکرد صفحه در موتور جستجو تأثیر بگذارد.

ابزار تست وب سایت

۷. راه اندازی

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

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

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

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

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

روند کار شما چگونه است؟

آیا شما یک روند طراحی مشابه را دنبال می کنید، یا اینکه روند شما کاملا متفاوت است؟ ما دوست داریم همه چیز را در موردش بشنویم، بنابراین دیدگاهتان را با ما درمیان بگذارید.

منبع: webflow

۰ ۰ vote
Article Rating