همه بازاریابی ، CRM فروش HubSpot ، خدمات مشتری ، CMS و نرم افزارهای عملیاتی در یک پلت فرم.

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

طراحی وب سایت در حال تغییر است. در حالی که برخی از ثابت ها مانند نیاز به محتوای مرتبط ، به موقع و جذاب باقی می مانند – عناصر اضافی که می توانند تأثیر وب سایت را افزایش دهند ، به طور مداوم ظاهر می شوند.
برخی از این عناصر به بیان داستان و توضیح ماهیت شرکت شما کمک می کند ، در حالی که برخی دیگر برای جلب توجه فوری کاربران یا بهبود تجربه در هر دستگاهی کار می کنند. استفاده همزمان از هر عنصری الزامی نیست (این می تواند منجر به یک تجربه شلوغ و گیج کننده شود) ، اما انتخاب عناصر خاصی که با اهداف برند و وب سایت شما هماهنگ باشد می تواند به افزایش تأثیر کلی کمک کند.
برای کمک به کاهش تمرکز و یافتن بهترین عناصر برای سایت شما ، ما مهمترین عناصر طراحی وب سایت مدرن را که می توانید برای بهبود عملکرد سایت خود پیاده سازی کنید ، تجزیه می کنیم.
اکثر شرکت ها دارای فونت یا تایپوگرافی خاصی هستند که از آنها برای کمک به مشتریان خود برای شناسایی سریع آنها در برابر رقبا استفاده می کنند. در سال های اخیر ، طراحان به مجموعه بزرگتری از فونت ها دسترسی پیدا کرده اند که باعث می شود مشاغل بتوانند با دقت بیشتر مارک های خود را از طریق تایپوگرافی بیان کنند.
به عنوان مثال ، The New Yorker فوراً با استفاده از فونت منحصر به فرد Adobe Caslon Pro شناخته می شود .
unique typography in modern web design by the New Yorker
منبع تصویر
تایپوگرافی یک عنصر طراحی منحصر به فرد است که ظاهر یکنواختی در هر صفحه از یک وب سایت ایجاد می کند. به عنوان مثال ، وب سایت نیویورکر بر اساس تایپوگرافی و اندازه فونت ، بازدیدکنندگان را از بخشی به بخش دیگر هدایت می کند.
هنگام ایجاد نام تجاری شرکت خود ، انتخاب شما در تایپوگرافی می تواند نکات ظریفی در مورد آنچه شما نمایندگی می کنید نشان دهد. آیا تجارت شما سرگرم کننده است یا جدی؟ کاربردی یا اطلاعاتی؟ صرف نظر از اینکه چه فونتی را انتخاب می کنید ، مطمئن شوید که طراح شما کاربرد آن را در مرورگرها و رایانه ها در نظر می گیرد. انتخاب فونتی که توسط مرورگرها و رایانه های رایج پشتیبانی نمی شود ، می تواند به این معنی باشد که وب سایت شما به صورت ناخوشایند در دستگاه های مختلف نمایش داده می شود.
برای دیدن نمونه ای از یک تصویر قهرمان بزرگ ، نیازی نیست از وب سایت انتشاراتی معروف Medium فراتر بروید.
modern website design elements: hero images تصاویری مانند این ، مفهوم بالا و پایین را از بین می برند ، در عوض یک دیدگاه منحصر به فرد ارائه می دهند. Medium با تمرکز بر روی تصویر با متن به جای CTA یا دکمه های اجتماعی ، یک تجربه بصری قوی ایجاد می کند که شما را ترغیب می کند تا برای خواندن بیشتر به پایین بروید.
تصاویر قهرمان نیز غالباً در پس زمینه قرار می گیرند و متن و سایر محتواها روی آن چیده می شود. صرف نظر از روشی که استفاده می کنید ، تصاویر بزرگ می توانند به شما کمک کنند تا بصورت تصویری داستان خود را بدون نیاز به تکیه بر متن بیان کنید.
تصاویر قهرمان برای وب سایت شما بدون نیاز به متن یا ویدیو لحن را تعیین می کند – تصویر مناسب می تواند فوراً به بازدیدکنندگان این حس را بدهد که برند شما در مورد چیست ، چه کار می کنید یا چه چیزی شما را منحصر به فرد می کند. در نتیجه ، ایده خوبی است که هم ایده های تصویری قهرمان را طوفان مغزی کنید و هم از منابع متعدد بازخورد بگیرید تا ببینید کدام تصویر بیشترین تأثیر را دارد.
ویدئوهایی که به طور خودکار در پس زمینه پخش می شوند می توانند جذابیت زیادی به یک صفحه اضافه کنند. از آنها می توان برای روایت یک داستان استفاده کرد و میزان محتوای دیگر مورد نیاز برای توضیح کسب و کار شما را به میزان قابل توجهی کاهش داد.
به عنوان مثال ، وب سایت ویستیا را در نظر بگیرید. هنگامی که در صفحه اصلی آنها قرار می گیرید ، یک ویدیوی بزرگ به طور خودکار در پس زمینه شروع به پخش می کند و با کلیک روی دکمه پخش ، نگاه عمیق تری به شرکت خواهید داشت:
فیلم های پس زمینه در طراحی وب توسط wistia
منبع تصویر
این ویدئوی پس زمینه به عنوان راهی درخشان برای جلب کلیک بازدیدکنندگان و ماندگاری بیشتر در صفحه عمل می کند.
ویدئوهای پیش زمینه تمرکز بازدیدکنندگان را از لحظه ورود آنها به صفحه شما متمرکز می کند. این ویدئو به بازدیدکنندگان شما اجازه می دهد تا نکات کلیدی مربوط به شرکت شما را بدون نیاز به خواندن یک خط متن درک کنند.
علاوه بر این ، ویدئو در مقایسه با متن 60 هزار بار سریعتر توسط مغز ما پردازش می شود. در حالی که مردم اغلب در خواندن متن های سنگین تردید دارند ، فیلم ها بدون زحمت ظاهر می شوند و می توانند خیلی سریع مصرف شوند. همچنین به افزایش سرعت اتصال و افزایش اندازه دستگاه های تلفن همراه کمک می کند و تجربه های ویدیویی بهتری را ایجاد می کند.
به بیان ساده ، طراحی تخت عبارت است از هر عنصری که شامل سه بعد مانند سایه ها نباشد یا درک آن را نداشته باشد. درک طراحی تخت نه تنها برای کاربران آسان تر است ، بلکه می تواند سریعتر در وب سایت ها بدون عناصر پیچیده یا بیش از حد فنی بارگیری شود.
بسیاری از سازمانها – اعم از بزرگ و کوچک – از شک و شکلی واقع گرایانه به طراحی تخت روی آورده اند. با این حال ، شرکت هایی مانند Uber با افزودن سایه ها و ابعاد ظریف ، چرخش خاص خود را روی سبک قرار داده اند.
همانطور که در تصویر زیر مشاهده می کنید ، عناصر گرافیکی به لطف سایه های اطراف خود بدون زیاده روی در آن حس عمق دارند.
sem-flat elements in modern web design by uber
منبع تصویر
طراحی تخت به بازدیدکنندگان کمک می کند مطالب شما را سریعتر بفهمند و افزودن برخی عناصر عمیق می تواند آن را زنده کند. صرف نظر از اینکه آیا وب سایت خود را به طور کامل با استفاده از طراحی مسطح طراحی می کنید یا از سایه ها و سایر عناصر استفاده می کنید ، مهم است که در سراسر وب سایت خود یکپارچه باشید. اطمینان حاصل کنید که صفحه اصلی ، صفحات محصول و سایر بخشهای کلیدی وب سایت شما همه از نشانه های طراحی یکسانی استفاده می کنند تا بازدیدکنندگان بتوانند فوراً آنچه را مشاهده می کنند بفهمند.
اکثر وب سایت ها دارای منوهای طولانی با گزینه هایی برای انتخاب هستند. مزیت این کار این است که منو می تواند بازدیدکنندگان را مستقیماً به جایی که می خواهند برسانند. عیب آن این است که آنها به طور کلی حجم زیادی از صفحه نمایش با ارزش را اشغال می کنند. منوی مخفی یا همبرگر این را تغییر می دهد. این منوی فشرده باعث صرفه جویی در فضا می شود و حرکت برای کاربران بصری است. modern website design elements: hamburger menus
منبع تصویر
نمی دانید چرا به آن منوی همبرگر می گویند؟
اگر از تخیل خود استفاده کنید ، سه خطی که روی هم چیده شده اند شبیه دو نان همبرگر و یک کیک است. باهوش.
چرا مفید است؟
صفحات وب سایت شما باید مسیر مشخصی را در اختیار کاربر قرار دهد. حذف ناوبری شلوغ ، تجربه را تمیزتر و بدون حواس پرتی می کند. این احتمال را افزایش می دهد که کاربران اطلاعات مورد نیاز برای تکمیل یک اقدام دلخواه را پیدا کنند.
بسیاری از وب سایت های B2B شروع به نمایش تصاویر بزرگ محصولات در سایت های خود می کنند تا ویژگی ها یا قسمت های مختلف محصول خود را برجسته کنند ، و این تصادفی نیست.
برای اینکه تصور بهتری از آنچه در مورد آن صحبت می کنیم به شما ارائه دهیم ، اجازه دهید نگاهی به صفحه محصول HubSpot's Marketing Hub بیندازیم :
high quality product images in web design by hubspot
یک تصویر برجسته بزرگ در این صفحه وجود دارد ، و هنگامی که به پایین اسکرول می کنید ، تصاویر اضافی بیشتری از محصول خواهید یافت. تصاویر نیز پاسخگو هستند که هدف آنها اطمینان از تجربه بهینه برای بینندگان از دستگاه های مختلف است ، همانطور که قبلاً اشاره کردیم.
تصاویر محصول با کیفیت بالا به طراحان کمک می کند تا ویژگی های مختلف یک محصول را به شیوه ای کارآمدتر و م highlightثرتر برجسته کنند.
این رویکرد با ارائه فرصتی برای برجسته سازی ارزشمندترین قطعات ، مزایای یک ویژگی را تقویت می کند.
این تصاویر بزرگ همچنین اسکن پسند هستند. آنها به بازدیدکنندگان کمک می کنند تا درک کاملی از عملکردهای مختلف محصول با انتقال آنها از طریق تصاویر به جای کلمات ایجاد کنند.
با ظهور Pinterest ، طراحان و بازاریابان به طور یکسان مجذوب کارت ها شدند. کارتهای جداگانه به توزیع اطلاعات به صورت تصویری کمک می کنند تا بازدیدکنندگان بتوانند به راحتی قطعات محتوی اندازه ای را بدون غرق شدن مصرف کنند.
صفحه اصلی Miiryia به عنوان یک نمونه عالی از طراحی کارت در عمل عمل می کند:
card design as a web development element featuring Miiryia
منبع تصویر
با تقسیم بخشهای مختلف محتوا به کارت ، کاربران می توانند مقالاتی را که می خواهند گسترش دهند انتخاب و انتخاب کنند. این به تمیز و منظم ماندن صفحه اصلی کمک می کند ، بدون تکیه بر یک تن متن.
طراحی کارت در وب سایت های B2B و B2C بیش از پیش رواج پیدا می کند زیرا به ارائه تکه های قابل هضم اطلاعات برای کاربران کمک می کند. استفاده از این طرح در سایت شما می تواند چندین محصول یا راه حل را در کنار یکدیگر برجسته کند.
به خاطر داشته باشید که کارت های شما باید پاسخگو باشند. این بدان معناست که با کوچک شدن یا بزرگتر شدن اندازه صفحه ، تعداد و اندازه کارت های نشان داده شده باید متناسب با آن تنظیم شود.
علاوه بر فیلم های پس زمینه ، فیلم های کوتاه محصول یا ویژگی نیز در حال پیشرفت هستند زیرا می توان از آنها برای برجسته کردن یک مورد استفاده خاص استفاده کرد. این ویدئوهای کوتاه برای زنده نگه داشتن راه حل شما بسیار عالی است ، در حالی که بازدیدکنندگان را با تجربه طولانی که باید در آن تجربه کنند ، خسته نمی کند.
یک مثال قوی در این مورد از طرف افراد InVision آمده است . آنها این تصویرگر کوتاه از نحوه استفاده آسان از محصول خود را با کشیدن و رها کردن یک طرح به طور مستقیم در صفحه اصلی خود نشان می دهند:
نمایش فیلم ها در طراحی وب بصورت بصری
منبع تصویر
شرکت های B2B از فیلم هایی استفاده می کنند که محصولات خود را توضیح می دهند تا بر روند تصمیم گیری خریدار تأثیر مثبت بگذارد.
modern website design elements: mobile-friendly layouts
وب سایت های نسل اول برای دسکتاپ طراحی شده اند. در نتیجه ، آنها برای قرار دادن مانیتورهای بزرگتر و کنترل ماوس با کلیک و کلیک ساخته شدند. با این حال ، ظهور دستگاه های تلفن همراه به این معنی است که ترافیک وب ممکن است از منابع متعددی ناشی شود – و وب سایت شما باید بدون در نظر گرفتن نوع دستگاه کاربر ، همان تجربه را ارائه دهد.
در عمل ، این به معنای ایجاد طرح بندی وب سایت های سازگار با تلفن همراه است که از اصل طراحی وب پاسخگو استفاده می کند ، که به عناصر وب سایت مانند تصاویر ، متن و رابط کاربر (UI) اجازه می دهد بسته به دستگاه مورد استفاده برای دسترسی به سایت ، مجدداً تغییر اندازه داده و تغییر اندازه دهند.
ترافیک دستگاه های تلفن همراه در حال حاضر بیش از 54 درصد از کل ترافیک وب در سراسر جهان را تشکیل می دهد . این بدان معناست که اگر سایت شما با موبایل سازگار نباشد ، ممکن است نیمی از مشتریان احتمالی خود را از دست بدهید.
یک سایت سازگار با دسکتاپ را در نظر بگیرید که توسط کاربر تلفن هوشمند قابل دسترسی است. اگر اندازه متن ، تصاویر و دکمه ها مطابق با کنترل های صفحه لمسی و اندازه صفحه نمایش کوچکتر نباشد ، برای مشتریان احتمالی تقریباً غیرممکن است که آنچه را که بدنبال آن هستند پیدا کنند – پس از چند بار کلیک اشتباه ، آنها احتمالاً کسب و کار خود را به جایی دیگر خواهند برد.
white space in web design
منبع تصویر
فضای سفید عنصری است که اغلب در طراحی وب مینیمالیستی مورد استفاده قرار می گیرد ، اما در حال حاضر یکی از ویژگی های مهم چارچوب های موثر سایت مدرن است. با ایجاد تعادل در محتواهایی مانند پیوندها ، متن و فیلم ها با مقدار مشابه فضای سفید ، کاربران به طور طبیعی به جنبه های کلیدی سایت شما کشانده می شوند. در حالی که هیچ استاندارد سخت و سریع برای میزان فضای سفید مورد نیاز شما وجود ندارد ، یک قانون خوب این است که حداقل مقداری فضای سفید بین هر عنصر محتوا ایجاد کنید.
ناوبری وب سایت نقش مهمی در رضایت کاربران دارد. اگر بازدیدکنندگان برای یافتن محصول یا صفحات تماس شما مشکل پیدا کنند ، به احتمال بسیار کمی کلیک کرده و فرایند تبدیل را آغاز می کنند.
فضای سفید به تمرکز توجه کاربر بر عناصری که بیشتر برای تجارت شما اهمیت دارند کمک می کند. به عنوان مثال ، اگر تصویر یا ویدیوی محصول برجسته ای در بالای صفحه اصلی خود دارید ، آن را از محتوای بیشتر با فضای سفید جدا کنید. این به آن کمک می کند تا به تنهایی بایستد و اهمیت آن را در مقایسه با بقیه سایت شما برجسته می کند. اگر آن را با عناصر بصری پر سر و صدا احاطه کرده باشید ، تمرکز به سرعت از بین می رود.
Speed Optimization in web design
منبع تصویر
اگر سایت شما به آرامی بارگیری می شود و کاربران مرورگرهای خود را به جای دیگری نشان می دهند ، داشتن یک وب سایت جذاب و غنی از محتوا به افزایش تبدیل کمک نمی کند. در نتیجه ، بهینه سازی همه عناصر سایت برای سرعت و کاهش زمان بین کلیک و محتوا بسیار مهم است.
در عمل ، این به معنی بهینه سازی همه تصاویر برای ایجاد تعادل بین کیفیت تصویر و اندازه فایل است. به عنوان مثال ، در حالی که تصاویر PNG کیفیت و شفافیت بالاتری را ارائه می دهند ، بسیار بزرگتر از تصاویر JPEG هستند. در بیشتر موارد JPEG بهترین تعادل بین سرعت و کیفیت را ارائه می دهد. GIF ها ، در عین حال ، برای تصاویر متحرک ایده آل هستند اما از رنگ های کمتری استفاده می کنند ، و برای تصاویر استاتیک کمتر از ایده آل هستند.
همچنین فشرده سازی هرگونه فایل میزبانی شده در سایت شما ایده خوبی است – بسیاری از ابزارهای فشرده سازی مدرن می توانند بدون از دست دادن عملکرد ، اندازه فایل را به میزان قابل توجهی کاهش دهند. صاحبان سایت باید محیط میزبانی خود را نیز در نظر بگیرند: به عنوان مثال ، میزبانی اختصاصی یا VPS به طور معمول سرعت بارگذاری سایت را سریعتر از راه حل های میزبانی مشترک ارائه می دهد.
طبق آمار گوگل ، با افزایش زمان بارگذاری صفحه از 1 ثانیه به 10 ثانیه ، نرخ بازگشت بازدیدکنندگان 123 درصد افزایش می یابد. این غول جستجو همچنین خاطرنشان می کند که با وجود انتقال به اتصالات قوی تر 4G ، "اکثر سایت های تلفن همراه هنوز کند هستند و دارای عناصر زیادی هستند."
در نتیجه ، حتی سرمایه گذاری های کوچک در بهینه سازی سرعت وب سایت می تواند سود قابل توجهی را به همراه داشته باشد ، به ویژه اینکه سرعت صفحه فرود در حال حاضر توسط گوگل به عنوان عامل رتبه بندی برای جستجوهای تلفن همراه و Google Ads استفاده می شود.
طراحی وب مدرن نیاز به ارزیابی منظم دارد تا اطمینان حاصل شود که سایت شما تصاویری جذاب ، محتوای جذاب و تجربه ای یکپارچه را بدون در نظر گرفتن دستگاه برای کاربران ارائه می دهد. عناصر ذکر شده در بالا یک نقطه شروع محکم برای ایجاد وب سایت های شیک ، ساده و سریع ارائه می دهند که توجه کاربران را جلب می کند و به تبدیل آنها کمک می کند.
یادداشت ویراستار: این پست در ابتدا در آگوست 2018 منتشر شد و برای جامعیت به روز شده است.
وبلاگ - راهنمای طراحی مجدد کتاب کار وب سایت [بر اساس فهرست]

در ابتدا منتشر شده در 3 سپتامبر 2021 5:00:00 بعد از ظهر ، به روز شده در 07 سپتامبر 2021
موضوعات:
پیشنهاد را گسترش دهید
قالب تقویم محتوای رسانه های اجتماعی

حق چاپ © 2021 HubSpot، Inc.

source

توسط perfectmoment