متریال دیزاین استانداردی برای ساخت و طراحی وب سایت و برنامه ها است. نسبت به سبک های قدیمی طراحی، این سبک کاربر پسند تر بوده و هدف آن ایجاد نظم و وحدت در طراحی وب است. در ادامه قرار است با Material Design و نحوه کار آن آشنا شوید.
از زمان ایجاد وب تا کنون این حوزه دستخوش تغییرات زیادی شده است. طراحی های اولیه وب با دردسر های فراوان در دهه 1990 و اوایل 2000 آغاز شد و در نهایت راه برای وب سایت های ساده تر، تمیز تر و قابل پیش بینی تر باز شد. سپس، تلفن های هوشمند وارد معرکه شدند و حوزه وب به تغییرات عظیمی نیازمند شد. این تغییرات ابتدا زلزله عظیمی در دنیای طراحی ایجاد کردند، ولی سرانجام وب سایت ها به لطف سیستم طراحی Google Material Design، تحت تأثیر قرار گرفتند.
طراحی متریال در اصل در سال 2014 معرفی شد و به عنوان طراحی مبتنی بر شبکه پذیرفته شد، سپس به سرعت گسترده شده و روند کاری جدیدی به خود گرفت.
Material Design چیست؟
Material Design یک سیستم طراحی وب است که توسط گوگل در سال 2014 توسعه یافته است. کل سیستم طراحی، زبان طراحی و کلیه مستندات در حال حاضر در material.io قرار دارند، که شامل موارد زیر است:
1_توضیحات مربوط به سیستم متریال دیزاین:
2_دستورالعمل های استفاده از زبان متریال دیزاین و چگونگی طراحی با آن:
3_داشتن اجزایی با قابلیت استفاده مجدد که طراحان را قادر می سازد به راحتی UI های متریال ایجاد کنند:
متریال دیزاین بسیار جامع تر از اکثر سیستم های طراحی است. Material Design فقط برای یک نام تجاری یا یک پروژه خاص ساخته نشده است. متریال دیزاین با نام کد “Quantum Paper” به عنوان یک زبان طراحی منتشر شد تا طراحان اندروید بتوانند از آن برای طراحی برنامه های خود استفاده کنند. در کنار آن هم گوگل از Material Design برای بازنگری در طراحی برنامه های خود استفاده کرد.
هدف کلی از ساخت Material Design این بود که طراحان بتوانند به سرعت برنامه هایی طراحی کنند که پاسخ گو، قابل استفاده و مقیاس پذیر باشند. در سال 2014، با انتشار متریال دیزاین موج بزرگی در سراسر جامعه طراحی ایجاد شد، که نه تنها برای توسعه اندروید، بلکه برای برنامه های iOS و وب سایت ها نیز کاربرد فراوانی داشت.
چرا متریال دیزاین ایجاد شد؟
برای درک چگونگی شکل گیری و فواید Material Design، باید به طراحی های قبل از ظهور متریال دیزاین نگاهی بیاندازیم.
skeuomorphism:
حدود سال 2010 بود که skeuomorphism تبدیل به یک طراحی برجسته و محبوب شد. این مدل یک سبک طراحی بود که باعث می شد عناصر UI شبیه اشیاء واقعی به نظر برسد. معمولاً وقتی صحبت از طراحی پس زمینه و نماد های یک وب سایت می شود، این سبک را بسیار خواهید دید. مثلاً این تصویر از صفحه اصلی Apple در سال 2012 است را مشاهده کنید:
بسیاری از آیکون های برنامه ای که در iPad مشاهده می کنید تصویر هستند. به عنوان مثال، به مواردی که با رنگ زرد مشخص شده اند نگاه کنید:
آیکون برنامه Camera که شبیه لنز دوربین است.
آیکون برنامه ساعت که شبیه یک ساعت دیواری آنالوگ قدیمی است.
آیکون برنامه تقویم که شبیه یک کارت تقویم با قابلیت تغییر است.
UI های Skeuomorph به دلیل ویژگی های واقع گرایانه این آیکون ها را مانند تصویر واقعی شان در دنیای واقعی نشان می دهند.
طراحی تخت (flat):
نوع دیگری از طراحی، طراحی تخت است، هدف این طراحی از بین بردن افراط و ایجاد تصور سطحی است. در اینجا این آیکون ها که قبلاً در دستگاه های قدیمی iOS نسخه سال 2020 بوده اند را می توانید مشاده کنید:
می بینید که نماد های برنامه ها در نسخه های 2020 مسطح شده اند و ویژگی های واقع گرایانه در آن ها کمتر دیده می شود. البته که طراحی های مسطح امروزه نیز دیده می شوند، زیرا به عنوان یک طراحی مینیمالیسم، خوب و تمیز هرگز از مد نمی افتند. طراحی تخت فقط یک سری نقص های بزرگ داشته که نیاز به اصلاح دارند.
گروه نیلسن نورمن توضیح می دهند: “[طراحی مسطح] اغلب منجر به گیج شدن کاربر هنگام کلیک و کاهش کارایی کاربر می شود. وقتی طراحان، رابط کاربری را مسطح می کنند، بسیاری از دال هایی که معمولاً به کاربران نشان می دهد کجا باید کلیک کند، حذف می شود. “
طراحی در Material Design:
Material Design از دنیای فیزیکی الهام گرفته شده است. می توان گفت این طراحی برای به روز رسانی طراحی های skeuomorphic بود، البته این یک استعاره است که به زودی وقتی اصول Material Design را بررسی می کنیم متوجه آن می شوید.
در واقع آنچه متریال دیزاین انجام داد فاصله گرفتن از UI های کاملاً تخت به منظور طراحی مسطح بود که گویی از کاغذ و جوهر الهام گرفته شده بودند. وقتی در طراحی مسطح به صورت مستقیم به صفحه نگاه می کنید، یک ورق کاغذ صاف و دو بعدی به نظر می رسد، اما در دنیای واقعی، اشکال واقعاً این گونه نیستند.
در واقعیت هم حتی کاغذ سه بعد دارد و ورق های کاغذ، سایه، درز و چین ایجاد دارند و حتی می توان آن ها را برش و تغییر اندازه داد، گوگل هم قصد دارد با استفاده از Material Design همین حالات را در فضای دیجیتال ایجاد کند.
به عنوان مثال به نمونه طراحی شده زیر دقت کنید:
به سایه ای که زیر نوار برنامه صاف قرار دارد توجه کنید. Material Design هنوز از عناصر تخت استفاده می کند. با این حال، این عناصر در سطوح مختلف قرار دارند و می توانند مانند کاغذ و سایر اشیاء در دنیای واقعی رفتار کنند و به تجربه های دیجیتالی احساس واقعی تری ببخشد.
این به کاربران برنامه یا وب سایت امکان می دهد تا به طور طبیعی به UI ها پاسخ دهند، زیرا در متریال دیزاین آن ها نحوه لمس و جابجایی اشیاء را دقیقاً مانند محیط فیزیکی درک می کنند. Matias Duarte، معاون بخش طراحی Google، توضیح می دهد که چرا Material Design یک تغییر مهم در طراحی وب است:
«بر خلاف اشیاء واقعی، مواد دیجیتالی را می توان به طور هوشمند گسترش داد و اصلاح کرد. مواد در متریال دیزاین دارای سطوح و لبه های فیزیکی بوده و شکاف ها و سایه ها مانند آنچه که می توانید لمس کنید طراحی می شوند. همچنین با استفاده از NNG، متریال دیزاین می تواند مشکلات ناشی از کمبود عمق و دیگر دال های کلیدی در طراحی مسطح را برطرف می کند.»
اصول اصلی Material Design چیست؟
Material Design چیزی فراتر از افزودن لایه یا سایه به طراحی ها است. در حقیقت متریال دیزاین یک منبع فوق العاده جامع است که قوانین طراحی جدیدی را تعیین می کند. همانطور که در هر نوع طراحی، اصولی اساسی برای طراحی وب وجود دارد، Material Design نیز دارای سه اصل خاص مربوط به خود است:
اصل شماره 1: مواد یک استعاره است
به عبارتی می توانید متریال دیزاین را دیجیتالی شدن دنیای فیزیکی بدانید. در Material Design به جای آن که بازدیدکنندگان و کاربران وارد یک فضای دیجیتالی غیر طبیعی شوند، می توان اصول اولیه محیط فیزیکی را در برنامه ها و وب سایت ها اعمال کرد تا تجربه کاربری بهتری ایجاد کرد.
به عنوان مثال، به Material Design’s Interaction نگاه کنید:
هر دو رابط دارای پیمایش افقی هستند. یکی به سمت چپ و تنها با کلیک کاربر و کشیدن محتوا حرکت می کند. در دنیای واقعی نیز معمولاً اشیاه به همین شکل حرکت می کنند. اما در سمت راست، یک انیمیشن پیمایش فعال شده با کلیک وجود دارد که طور دیگری حرکت می کند، در حالی که اجسام دنیای واقعی ما به این سمت حرکت نمی کنند. همانطور که می بینید در Material Design به شما نشان داده شده که کدام صحیح و کدام غلط است.
با ایجاد رابط کاربری با این نوع ویژگی های فیزیکی، کاربران می توانند برای تعامل با وب سایت ها و برنامه ها تنها به تجربیات زندگی طبیعی خود تکیه کنند.
اصل شماره 2: جسورانه، گرافیکی، طبیعی
به این مثال از بخش Material Foundation نگاه کنید:
بخش Material Foundation در متریال دیزاین بخش کامل و جامعی است. این قسمت خود بخش های متفاوتی دارد و هر بخش نحوه عملکرد، اجزا و دلیل نیاز به کارکرد آن را شرح می دهد.
این سیستم به وضوح عناصر UI حیاتی را تجزیه کرده و برای هر یک قسمتی را نظر گرفته است، این قسمت ها عبارت اند از:
چیدمان (با تأکید بر شبکه های پاسخگو و سلسله مراتب)
همچنین Material Design توضیح می دهد که چگونه یک طراحی کاربری، کاربر پسند ایجاد کنید. در ابتدا، متریال دیزاین بر طراحی مبتنی بر شبکه، تایپوگرافی های واضح، پالت رنگ های پررنگ و متحرک سازی های معنا دار تمرکز داشت.
برای اینکه بتوانید تصور کنید که چگونه به نظر می رسید، این ابزاری است به نام material design palette:
توجه کنید که این رنگ ها چقدر روشن هستند؟ اکنون متریال دیزاین پالت های قوی تر و پررنگ تری را به منظور ایجاد کنتراست و عمق بیشتر در رابط کاربری خود قرار داده است.
اصل شماره 3: متحرک سازی های معنا دار
طراحی های متحرک در متریال هیچ ارتباطی با انیمیشن ها و طراحی موشن گرافیک ندارد. متحرک سازی در Material Design باعث می شود که طراحی عمقی تر و تجربه کاربر بصری تر شود. سه دلیل وجود دارد که هنگام طراحی در متریال دیزاین، از حرکات ظریف در طراحی استفاده می شود:
اطلاع رسانی: حرکات به کاربر اطلاع دهند که در صفحه چه کاری می تواند انجام دهد.
کمک به تمرکز کاربر: حرکات می توانند کاربر را راهنمایی کرده تا به هدف خود برسد.
بیان گرا کردن سایت: برای افزودن کمی شخصیت و شادی به رابط کاربری می توان از حرکات کمک گرفت.
حتی عناصر کوچک به اندازه آیکون ها می توانند متحرک شوند:
قسمت های مختلفی از صفحه می تواند متحرک شود به عنوان مثال، زمانی که کاربران منتظر باز شدن صفحه جدید هستند ما می توانیم تصویر متحرکی به آن ها نشان دهیم. واقعاً همه چیز بستگی به این دارد که هنگام حضور کاربر در صفحه، شما چقدر به حرکات نیاز دارد.
مزایا و معایب Material Design
خوب، بنابراین ما قبلاً نکات مثبت و منفی متریال دیزاین را بررسی کرده ایم. اما این جا مزایا و معایب را جمع بندی کرده و همه را در یک جا جمع آوری کرده ایم:
مزایای Material Design:
طراحان وب در تمام مراحل می توانند از ویژگی های Material Design بهره مند شوند، خواه پایه اصلی باشد که تمام کار خود را در آن پایه گذاری کرده اند و یا منبعی باشد که گاهاً از آن استفاده می کنند.
یک منبع جامع از هر یک از اجزای کلیدی و رفتار های UI است، که ارزش زیادی در طراحی دارند.
برای شروع طراحی برنامه های Android، متریال دیزاین می تواند رویکردی سازگار با تلفن همراه بوده و مسئول پیش برد بیشتر وب سایت ها در زمینه موبایل باشد.
متریال دیزاین اولین رویکرد طراحی کاربر پسند است و بسیاری از اشکالات مدل های قبلی خود را برطرف کرده است که در آن ها مشکلاتی در نحوه استفاده، خوانایی و دسترسی وجود داشت.
Material Design طراحان را مجبور می کند که فراتر از زیبایی شناسی نگاه کنند و همه چیز را واقعی تر طراحی کنند. در نتیجه، به وسیله این مدل طراحی رابط ها بصری تر می شوند و تجربه کاربری بهبود می یابد.
متریال دیزاین را گوگل ارائه می دهد و مستندات و پشتیبانی گسترده آن برای توسعه دهندگان و طراحان جذاب تر و کاربردی تر است.
این روز ها سیستم طراحی بسیار انعطاف پذیر تر و قدرتمند تر است به طوری که طراحان می توانند تنها آنچه که مناسب خودشان است از متریال دیزاین بگیرند.
معایب Material Design:
در صورت رعایت بیش از حد قوانین متریال دیزاین، وب سایت ها و برنامه ها اکثراً شبیه به یک دیگر می شوند.
ممکن است متریال دیزاین آزادی یا خلاقیت در طراحی را کم کند، زیرا همه چیز را برای طراحان مو به مو بیان می کند.
برخی هستند که به دلیل تأکید بر برنامه نویسی، ممکن است از Material Design (یا حتی هر یک از اجزای از پیش ساخته آن) استفاده نکنند.
این سیستم طراحی در ابتدا برای طراحان برنامه طراحی شده بود، بنابراین بخش هایی از آن وجود دارد که واقعاً به طراحی وب ارتباطی ندارد.
برخی از دستورالعمل های طراحی (مانند رابط های رنگارنگ، استفاده گسترده از نماد ها و انیمیشن ها) می تواند مشکلاتی مانند، کندی سرعت وب سایت به وجود آورد.
چرا از متریال دیزاین استفاده می شود؟
Material Design به هیچ وجه یک سیستم طراحی بی عیب و نقص نیست، اما تجربه به ما نشان داده است که همیشه با موفقیت به مخاطبان اصلی خود خدمت کرده است. Material Design شیوه طراحی بهتری را برای وب به ارمغان آورده و همه را به سمت طراحی های قابل استفاده و واکنش گرا هدایت می کند.
اکنون که ما وقت داریم تا با آن آشنا شویم، طراحان وب می توانند از آن برای این اهداف خود استفاده کنند:
برای الهام گرفتن در سیستم های طراحی خودشان.
قرض گرفتن اجزا یا موضوعات پیش ساخته آن که می تواند کار را سفارشی کند.
پایبندی به مجموعه ای مدرن از اصول طراحی که اطمینان می دهد تجربه کاربر همیشه در اولویت قرار دارد.
فقط به خاطر داشته باشید که هدف در متریال دیزاین، طراحی بر اساس اعداد و ارقام نیست، این همان چیزی است که طراحان و توسعه دهندگان در روزهای اولیه طراحی متریال انجام دادند و نتیجه معکوس داشت.
در عوض، از Material Design برای ایجاد یک تجربه بصری بهتر برای بازدیدکنندگان خود استفاده کنید. تجربه ای که در آن می توانند به راحتی متوجه شوند هر عنصر در صفحه چه کار می کند و هنگام برخورد با آن چگونه باید واکنش نشان دهند.
قرار است در این مطلب شما، نحوه پیاده سازی سایت شیشه ای (glassmorphism) و این ترند طراحی سایت جدید را فقط با استفاده از HTML و CSS بیاموزید. اگر به طور مرتب وب سایت های مرتبط با طراحی سایت، مانند Dribbble را دنبال می کنید، قطعاً می دانید این ترند جدید در حال ظهور است. این مدل طراحی با آن که جدید است، اما توسط برند های معتبری مانند اپل و مایکروسافت استفاده می شود. خب طراحی سایت شیشه ای یا “گلس مورفیسم” دقیقا چیست؟
از نظر فنی، گلس مورفیسم شامل طراحی یک کادر شفاف با کمی تاری، سایه و رنگ حاشیه روشن است که برای برخی از عناصر کارت مانند، در پس زمینه های رنگارنگ یا تک رنگ استفاده می شود. این امر بر اساس پس زمینه مورد استفاده، ظاهر شخصی تری برای رابط کاربری ایجاد می کند.
نمونه ای از گلس مورفیسم
به این طراحی ها، گلس مورفیسم یا طراحی شیشه ای می گوییم. ما در این مقاله نمی خواهیم از نظر طراحی گرافیکی به جزئیات این طراحی بپردازم، ما می خواهیم به شما نشان دهیم که چگونه می توانید تنها با استفاده از کد های HTML و CSS به این مدل طراحی برسید.
اولین چیزی که باید در مورد glassmorphism درک کرد این است که هیچ نوع عکس پس زمینه یا منظره ای با آن هم خوانی ندارد. در طراحی آن استفاده از رنگ های زنده ترجیح داده می شود و استفاده از اشکال و زمینه های ساده تر، به جای تصاویر بسیار ظریف، کلید اصلی در آن است.
در همین مورد، ما قصد داریم پس زمینه ای با جلوه های گرادیان را اعمال کنیم تا زمان بارگذاری آن با یک تصویر واقعی افزایش نیابد.
برای طراحی این قسمت باید به تگ <body> در فایل HTML ویژگی های زیر را اضافه کنیم:
البته در صورتی که ویژگی های گرادیان توسط مرورگر خاصی پشتیبانی نشود، از اولین ویژگی پس زمینه به عنوان جایگزین استفاده می شود، اگرچه اکثر مرورگر های مدرن از آن پشتیبانی می کنند.
بیایید از استایل فونت بهتری مانند Inter که از فونت های Google نیز هست استفاده کنیم. با افزودن کد زیر در تگ <head>، می توانید فونت را تعریف کنید:
سپس با اعمال font family بر روی تگ body در فایل CSS تان روند طراحی را ادامه دهید:
body {
/* other styles */ font-family: 'Inter', sans-serif;
}
ایجاد المان کارت مانند
بیایید با تنظیم نشانه گذار HTML یک کارت ایجاد کنیم که در واقع حالت شیشه ای دارد. می توانیم با افزودن عنوان، توضیحات و لینک ها این کار را به سادگی انجام دهیم:
<div class="card">
<h3 class="card-title">Glassmorphism is awesome</h3>
<p> A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
<a href="https://ui.glass">Read more</a>
</div>
بیایید یک ظاهر اولیه به طراحی کارت و عناصر اضافه کنیم:
در حال حاضر کمی بهتر به نظر می رسد، اما همانطور که می بینید هنوز هیچ پیش زمینه ای وجود ندارد. دلیل آن این است که در قسمت بعدی می خواهیم نحوه اضافه کردن جلوه ها را به شما نشان دهیم.
افزودن افکت ها به Glassmorphism
افزودن افکت و تنظیم یک پس زمینه نیمه شفاف و استفاده از ویژگی های فیلتر زمینه برای افزودن جلوه ای تار به پس زمینه، بسیار ساده است. فقط کافی است ویژگی های زیر را به عنصر card در فایل CSS خود اضافه کنید:
عالی شد! اکنون خواهید دید که پس زمینه سفید و نیمه شفاف است، البته ممکن است بپرسید که حالت شیشه ای این طراحی کجاست؟
خب، هنوز نمی توانید آن را ببینید، زیرا هیچ چیزی در پشت عناصر به اندازه کافی متمایز نیست که بتواند حس شیشه ای را القا کند. بنابراین ما قصد داریم با استفاده از یک تصویر SVG یک شکل به آن اضافه کنیم.
اکنون می توانید جلوه های کامل طراحی شیشه ای را با شکلی متمایز تر در پس زمینه و تار شدن کارت شفاف خود مشاهده کنید. این عالی به نظر می رسد!
همانطور که می بینید، برای قرار دادن صحیح عناصر کنار هم و طراحی یک جلوه شیشه ای خوب، کار شما مقدار بیشتری طول می کشد، اما پس از انجام آن کار شما واقعاً منحصر به فرد به نظر می رسد. شکل پشت عناصر کارتی شکل حداقل از لحاظ نظری می تواند هر چیزی باشد. اما ترجیح داده می شود که آن ها اشکال یا تصاویر ساده باشند، یا بیشتر تصاویری باشند که جزئیات کمتری دارند.
در اینجا یک مثال کوچک از طراحی سایت به صورت شیشه ای وجود دارد که می توانید کد کامل آن را ببینید:
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism effect by ui.glass</title>
<style>
body {
padding: 4.5rem;
margin: 0;
background: #edc0bf;
background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
font-family: 'Inter', sans-serif;
}
.shape {
position: absolute;
width: 150px;
top: .5rem;
left: .5rem;
}
.card {
width: 400px;
height: auto;
padding: 2rem;
background: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 1rem;
}
.card-title {
margin-top: 0;
margin-bottom: .5rem;
font-size: 1.2rem;
}
p, a {
font-size: 1rem;
}
a {
color: #4d4ae8;text-decoration: none;
}
</style>
</head>
<body>
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
<div class="card">
<h3 class="card-title">Glassmorphism is awesome</h3>
<p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
</div>
</body>
</html>
در انتها نیز کد بالا تصویر پایین را برای ما طراحی می کند:
پشتیبانی از طراحی شیشه ای در مرورگر
ما به عنوان یک تیم طراحی وب موفق وظیفه داریم مطمئن شویم که کدی که می نویسیم برای اکثر مرورگر های موجود در بازار قابل پشتیبانی است. اکثر ویژگی های CSS که ما در این آموزش استفاده کرده ایم توسط همه مرورگر ها پشتیبانی می شود، به جز یکی: که آن هم ویژگی backdrop-filter است.
البته حالت گلس مورفیسم به هیچ وجه توسط IE 11 پشتیبانی نمی شود، البته اگر بخواهیم صادقانه بگوی، در سال های آینده اهمیت چندانی نیز نخواهد داشت. با ورود Bootstrap 5، آن ها دیگر پشتیبانی جدیدی از IE 11 را اضافه نکردند، علاوه بر این، مایکروسافت اعلام کرد که پشتیبانی از IE 11 را در آگوست امسال متوقف می کند. بنابراین نباید خیلی هم نگران آن باشیم.
با این حال، یک مشکل دیگر نیز در این جا وجود دارد، فایرفاکس بنا به دلایلی، ویژگی backdrop-filter را به طور پیش فرض فعال نمی کند، حتی اگر مرورگر از این نوع استایل پشتیبانی کند. البته ما امیدواریم در آینده نزدیک این ویژگی به طور پیش فرض فعال شود.
بنابراین، آیا می توان از طراحی شیشه ای یا گلس مورفیسم (glassmorphism) در تولید و طراحی سایت استفاده کرد؟ در حقیقت جواب ما مثبت است. این واقعیت که glassmorphism در چند مرورگر کار نمی کند (3.76 برای Firefox دقیق تر)، بدان معنا نیست که این رابط کاربری برای همه مرورگر ها به اندازه کافی خوب نیست.
ما معمولاً از این نوع طراحی برای سایت های سطح سازمانی که دسترسی به آن ها برای عموم مهم و ضروری است استفاده نمی کنیم، اما شاید بهتر باشد از آن برای وب سایت های شخصی یا تجاری، حتی برای برخی از رابط های برنامه ای استفاده کنیم.
نتیجه
ما معتقدیم که طراحی شیشه ای یک ترند طراحی سایت بسیار جالب است و می توان از آن در برنامه های کاربردی واقعی نیز استفاده کرد. البته که هنگام پیاده سازی آن اشکالاتی نیز وجود خواهد داشت، زیرا شما نیاز به تجربه طراحی دارید. همچنین برای پشتیبانی پیش فرض آن در Firefox یک اشکال وجود دارد، که ممکن است در آینده تغییر کند.
امیدواریم این آموزش به شما در درک بیشتر این ترند طراحی جدید و نحوه پیاده سازی آن در رابط های وب کمک کند.
طراحی وب سایت سازگار با موبایل ، طرحی است که تجربه جستجو با موبایل را در اولویت قرار می دهد. این رویکرد در دهه اخیر بسیار مهم شده است. بر اساس تحقیقات انجام شده توسط Statista، امروزه بیش از نیمی از ترافیک وب سایت توسط گوشی همراه اتفاق می افتد و تقریبا 45٪ از کل خرید های آنلاین را شامل می شود. با توجه به اینکه گوشی های هوشمند فقط در ده سال گذشته بوده اند، انتظار می رود این تعداد با افزایش جستجو در وب سایت و بهبود طراحی ها، افزایش یابد.
به همین دلیل وب سایت هایی که برای ارائه تجربه بهتر وب سایت خود برای موبایل تلاش نمی کنند، به شدت از رقبای خود عقب می مانند.
نکات گفته شده در این مقاله به شما کمک می کند وقتی شخصی از نسخه موبایل شما را جستجو می کند، وب سایت تان به درستی کار کند. در ادامه با ما همراه باشید تا این نکات را بیاموزید.
7 نکته برتر در زمینه طراحی وب سایت برای موبایل
1- استفاده از روش رویکرد اول موبایل
جستجو در وب سایت با موبایل که تقریباً از دسک تاپ پیشی گرفته است، طراحان مجبور شده اند ابتدا طراحی سایت را برای گوشی همراه بهینه کنند و بعد به سراغ نسخه دسکتاپ بروند.
به همین دلیل ابتدا اولویت با بهینه سازی وب سایت برای نسخه موبایل و بعد نسخه دسکتاپ است و این روش در طول سال ها، بهترین روش معمول بوده است.
در طراحی وب سایت سازگار با موبایل محدودیت هایی در اندازه وجود دارد و کاربران اغلب با یک دست گوشی خود را می گیرند. به عنوان مثال انیمیشن هایی را در نظر بگیرید که به ورودی ماوس متکی هستند، اگر نسخه دسکتاپ شما بیش از حد به این نوع بازخورد تصویری متکی باشد، بعدا برای موبایل مشکل ساز خواهد شد.
طراحی وب سایت برای گوشی موبایل از همان ابتدا بر سادگی و سهولت استفاده تاکید دارد.
2- از ابعاد و اندازه توصیه شده استفاده کنید
در گوشی های موبایل، فضا نسبت به سایر زمینه های طراحی محدودتر است. اما در نظر گرفتن محدودیت های اندازه در آغاز پروژه بهترین راه برای جلوگیری از درگیری بعدا است.
وضوح صفحه نمایش گوشی های همراه، با توجه به نوع دستگاه متفاوت خواهد بود، اما طبق تحقیقات انجام شده توسط statcounter، در حال حاضر بیشترین استفاده از آن 360 × 640 (نسبت ابعاد 9:16) است. Google Analytics می تواند به شما بگوید که کاربران از چه دستگاه هایی استفاه می کنند و باید مطمئن شوید که طراحی وب سایت شما به اندازه کافی پاسخگو تغییرات می باشد.
در مورد اندازه فونت در طراحی وب سایت موبایل ، حداقل 16 پیکسل برای بدنه توصیه می شود. همچنین بسته به نوع حروف استفاده شده می تواند متفاوت باشد (بر اساس نوع آن ها، برخی از فونت ها در 16 پیکسل کمتر از بقیه قابل خواندن هستند).
اندازه استانداردی برای فونت ها وجود ندارد. در صورت تردید به راحتی اندازه های فونت را روی یک دستگاه تلفن همراه برای خود آزمایش کنید.
در استفاده از یک تصویر می توانید بر روی قسمت مورد نظر بزرگنمایی کرده و عناصر اضافی پس زمینه را مانند مثال بالا برش دهید.
اندازه دکمه در طراحی وب سایت سازگار برای موبایل بسیار مهم است. زیرا صفحه های لمسی در انتخاب ورودی کاربر دقت کمتری نسبت به ماوس و صفحه کلید دارند. یک مطالعه با تمرکز بر روی کاربران مسن، دکمه های صفحه لمسی را برای دسترسی بهینه بین 42 تا 72px توصیه می کند.
3. مطالب خود را ساده کنید
هر زمان که شما با گوشی همراه خود از یک وب سایت مبتنی بر نسخه موبایل دیدن می کنید، متوجه خواهید شد که محتوای آن به اندازه یک سیستم خانگی مانند کامپیوتر یا لپ تاپ نیست. قانون سخت هنگام طراحی وب سایت سازگار با موبایل ، این است که همه چیز را ساده کنید.
در مثال زیر هنگام جستجو اطلاعات مربوط به دونات روی دسکتاپ، صفحه اصلی به شکل زیر خواهد بود:
تمام اطلاعاتی که می توانید در مورد این شیرینی های خوشمزه یاد بگیرید به شما نمایش داده می شود.
هنگامی که از طریق تلفن همراه به جستجوی همان وب سایت بپردازیم صفحه اصلی به شکل زیر است:
شما فقط موارد ضروری را می بینید. مهم ترین اطلاعات در بالا قرار داده شده اند. (“اکنون سفارش دهید”) و عناصری را که برای یک تجربه خرید موبایل مهم نیستند حذف شده اند.
4- به حداقل رساندن منو
در حالی که وب سایت های مبتنی بر دسک تاپ دارای یک نوار راهنمای هدر با چندین منو و زیر منوی اصلی هستند، در نسخه موبایل همه این موارد در یک آیکون سه خط قابل شناسایی و استاندارد شده است. بیشتر عناوین و منو های وب سایت سازگار با موبایل توسط آن آیکون، کاهش می یابد.
برای سبک یک منوی واقعی، یک روش معمول نوار کناری کشویی است که بخشی از صفحه را با گزینه های راهنما پوشانده است. این باعث می شود که منو بتواند در ابعادی جداگانه از بقیه محتوای صفحه کار کند در حالی که فضای کاری کاربر را برای خارج شدن از منو و بازگشت به صفحه قبلی باز می گذارد.
بسته به میزان پیچیده بودن منو شما، هر گزینه منو ممکن است شامل گزینه های تو در تو یا یک زیر منو باشد. هنگامی که کاربر بر روی یکی از این زیر منوها کلیک می کند، برای کوتاه نگه داشتن لیست، بهتر است لیست گزینه های جدید جایگزین منوی موجود شود.
فراموش نکنید که نوار پیمایش را بر روی صفحه نمایش اصلاح کنید تا کاربر مجبور نباشد برای این منظور تمام صفحه را به بالا برگرداند.
5- حذف محتوای غیر ضروری
از آنجا که طراحی وب سایت مبتنی بر موبایل نیاز به اطلاعات کافی دارند، طراحان باید تمام محتوای غیرضروری را حذف یا کوتاه کنند. اینجا جایی است که بخش های مختصر و قابل انعطاف مفید هستند. کوتاه بودن محتوا شامل اختیاری کردن توضیحات توضیحی با نمادی مانند مثلث یا علامت + است که محتوای پنهان را نمایش داده یا پنهان می کند.
محتوای تکراری را می توان ادغام کرد تا به جای انباشته شدن روی یکدیگر، فضای مشابه را همپوشانی کند. در طراحی Artyom Ost که در اینجا آورده شده است، سه عبارت در زیر عنوان در نسخه دسک تاپ وجود دارد و در نسخه تلفن همراه طراح آن ها را با هم ادغام کرده است.
6. تصاویر و CSS خود را فشرده کنید
آیا می دانید طبق گفته Kissmetrics، چهل و هفت درصد از بازدید کنندگان وب سایت انتظار دارند سایتی در کمتر از 2 ثانیه بارگیری شود؟ اگر فرآیند بارگیری بیش از 3 ثانیه طول بکشد، 40 درصد بازدیدکنندگان از وب سایت خارج می شوند.
تصاویر و CSS فضای سرور زیادی را اشغال می کنند، به این معنی که بارگیری آن ها بیشتر طول می کشد. اما، از طرفی شما می خواهید برای بهبود تجربه کاربری وب سایت سازگار با موبایل از عناصر طراحی بصری که باعث افزایش جذابیت سایت می شود استفاده کنید.
راه حل این است که تصاویر و کد ها را بهینه سازی کنید. وقتی اندازه فایل تصویری خود را فشرده می کنید، سریع تر دانلود می شوند، بدون اینکه روی اینکه روی کیفیت سایت شما تأثیر منفی بگذارد.
سخن آخر
بیش از یک میلیارد وب سایت در جهان وجود دارد، اما همه این وب سایت ها برابر نیستند. دارندگان وب سایتی که برای بهبود تجربه کاربری موبایل سخت تلاش می کنند با بازدید بیشتر، مراجعه به سایت و بازدید مجدد از آن ها پاداش می گیرند.
در هنگام طراحی وب سایت مبتنی بر نسخه موبایل ، نکات طراحی ذکر شده در بالا را پیاده سازی کنید. این نکات به شما کمک می کند وقتی شخصی از نسخه موبایل شما را جستجو می کند، وب سایت تان به درستی کار کند. می توانید با رعایت این نکات طراحی را شروع کنید.
تفاوت بین UI و UX چیست؟ این موارد چه معنایی دارند؟ اگر می خواهید یک وب سایت طراحی کنید، اصطلاحات صنعت فناوری بسیار شبیه گوش دادن به یک زبان خارجی است- به جز اینکه بیشتر زبان های خارجی قواعد دارند. اما کار با یک وب سایت حرفه ای کاری است که هر کسب و کاری باید در برخی موارد انجام دهد. اگر یک وب سایت موفق می خواهید، ممکن است به یک مترجم در این زمینه نیاز داشته باشید. در این مقاله قصد داریم دو مورد از رایج ترین این اصطلاحات، UX و UI و تفاوت آن ها در زمینه طراح وب بررسی کنیم.
مفاهیم پایه UI و UX
قبل از این که به سراغ تفاوت های UI و UX برویم بهتر است با برخی از مفاهیم پایه در رابطه با این دو اصطلاح شروع کنیم تا کمی بیشتر با آن ها آشنا شوید، سپس می توانیم در ادامه مطلب به موارد عمیق تر بپردازیم.
طراحی وب – یک دسته چتر گسترده برای همه مواردی که به طراحی عناصر و کاربرد یک وب سایت مربوط می شود. هر دو بحث طراحی UI و UX، همراه با بسیاری از زمینه های دیگر، در طراحی وب گنجانده شده اند.
توسعه وب – قسمت فنی ساخت وب سایت، با تمرکز بر کد نویسی. توسعه وب بیشتر به “front-end” و “back-end” تقسیم می شود.
رابط کاربر (UI) – یک تخصص طراحی وب است که با کنترل هایی که افراد برای تعامل با یک وب سایت یا برنامه از جمله نمایش دکمه ها و کنترل های اشاره استفاده می کنند، سر و کار دارد.
تجربه کاربر (UX) – یکی دیگر از تخصص های طراحی وب، این یکی مربوط به رفتار و احساس کاربر هنگام استفاده از سایت یا برنامه است. طراحی UX بسیاری از زمینه های دیگر را در بر می گیرد، اما آن ها را از دید کاربر مشاهده می کند.
همانطور که قبلاً مشاهده کردید، هیچ یک از این مناطق منحصر به فرد نیستند و همپوشانی های زیادی وجود دارد. طراحی وب و توسعه وب فقط دو روی یک سکه هستند، همچنین طراحی UI بر طراحی UX تأثیر می گذارد، توسعه وب نیز از همه آن ها پشتیبانی می کند.
طراحی وب سایت
“طراحی وب” اصطلاحی قدیمی است و به روز هایی برمی گردد که یک شخص تنها تمام جنبه های طراحی یک وب سایت را اداره می کرد. طبق استاندارد های مدرن، اصطلاح “طراح وب” می تواند کمی مبهم باشد. امروز، به لطف فناوری و درک بیشتر ما از صنعت، تعداد بسیار زیادی زیرمجموعه در این زمینه داریم.
زیرمجموعه های طراحی وب شامل UI و UX است، اما همچنین اختصارات سرگرم کننده دیگری مانند IA (معماری اطلاعات، کار با نقشه برداری و نویگیشن سایت) و CRO (بهینه سازی نرخ تبدیل، تنظیم دقیق طراحی سایت برای افزایش فروش، ثبت نام یا سایر موارد خاص) نیز وجود دارند. ده ها مورد از این زیرمجموعه ها وجود دارد که هر روزه طراحان سعی می کنند با ایتفاده از این موارد شغل های بهتری را در یک بازار رقابتی پیدا کنند، این باعث می شود دسته های جدیدی ایجاد شوند.
توسعه وب
توسعه وب به دو دسته اصلی تقسیم می شود:
Front-end (a.k.a. سمت کلاینت): کد نحوه نمایش وب سایت (یا برنامه) در صفحه است. توسعه دهنده فرانت وظیفه زنده سازی چشم انداز طراح وب را بر عهده دارد، معمولاً با استفاده از زبان های علامت گذاری مانند HTML ،CSS و JavaScript این موارد را انجام می دهند. به طور معمول، همه آنچه طراح برنامه ریزی کرده است واقعاً عملی نیست، بنابراین توسعه دهنده فرانت اغلب با طراح بک اند نیز کار می کند و تعامل دارد.
Back-end (a.k.a. سمت سرور): “front-end” از سیستم دیجیتال منابع میزبانی شده در یک سرور خارج می شود. توسعه دهنده back-end با مدیریت منابع پشت صحنه، کد گذاری داده ها در پایگاه داده، نحوه تحویل داده ها را بهینه می کند. آن ها از زبان هایی مانند PHP ،Ruby ،Python ،Java یا .Net استفاده می کنند.
رابط کاربر (UI)
اکنون که طراحی و توسعه وب را توضیح دادیم، می توانیم زمینه های تخصصی تر مانند طراحی UI و UX و تفاوت های آن ها را بررسی کنیم. UI چیزی است که همه بدون تأمل زیاد از آن استفاده می کنند- نیازی نیست که از تاریخچه نماد همبرگر مطلع شوید تا بدانید که دکمه دارای سه خط منوی شماست.
و این یک اصل ثابت در اکثر زمینه های طراحی وب است: اگر کار های آن ها به خوبی انجام شده باشد، حتی نباید متوجه آن ها شوید. این مورد بیشتر در طراحی UI رایج است: با یک رابط کاربری بصری، کاربر مجبور نیست برای استفاده از آن خبلب به آن فکر کند.
اگر مجبور باشید به طور فعال در مورد چگونگی استفاده از کنترل ها فکر کنید، این یک طراحی UI بد تلقی می شود. جستجوی دکمه مورد نیاز یا صرف چند ثانیه برای فهمیدن اینکه چه دکمه ای شما را به هدفتان می رساند باعث می شود شما از تجربه کلی استفاده از سایت منحرف شوید. هدف از طراحی رابط کاربری نه تنها ارائه تمام کنترل هایی است که کاربرلازم دارد، بلکه ایجاد کنترل ها طوری است که کاربران با یک نگاه کاربرد آن ها را بفهمند.
نگرانی دیگر مدیریت فضا است. طراحان UI باید محیطی شاد را در اختیار کاربران قرار دهند و گزینه های زیادی به کاربران بدهند و فضای صفحه را حفظ کنند. به این ترتیب تکنیک هایی مانند کنترل شناور و بیرون منو های کشویی به وجود آمدند. این وظیفه طراح UI است که تصمیم بگیرد کدام کنترل ها باید در همه زمان ها ارائه شود و چه مواردی باید پنهان شده یا نادیده گرفته شوند.
تجربه خدمات (UX)
از بسیاری جهات، UX با UI تفاوت دارد و از منظر کاربر مانند زمینه طراحی وب است. طرح صفحه وب چگونه بر کاربر تأثیر می گذارد؟ UI چگونه بر کاربر تأثیر می گذارد؟ وقتی به مراحل پیشرفته می روید، UX بسیار استراتژیک تر می شود، مانند: “چگونه صفحه ای را طراحی کنیم که کاربر بخواهد به سیستم وارد شود؟”
همانطور که می توانید تصور کنید، طراحی UX شامل بسیاری از زمینه های دیگر در طراحی وب است. بسیاری از مردم درابن زمینه، در مورد ” UI در مقابل UX ” صحبت می کنند، اما حقیقت این است که این دو به جای رقابت با یکدیگر کار می کنند و تنها چند تفاوت جزئی بین UI و UX وجود دارد. در واقع، همپوشانی بسیار زیادی در این بین وجود دارد که انواع طراحان وب می توانند از UX و اطالاعات آن بهره مند شوند. دقیقاً به همین ترتیب UX به یک رشته جداگانه تبدیل شد- استخدام یک متخصص UX به طور جداگانه مسئولیت های دیگر اعضای تیم را از بین می برد.
اگرچه ممکن است در ابتدا بی مورد به نظر برسد، اما در واقع بین طراحی UX و اهداف تجاری مانند فروش یا تبدیل مشتری، رابطه مستقیم وجود دارد. با توجه به اینکه بسیاری از تصمیمات انسانی ناشی از احساسات و غرایز است، منطقی است که بهینه سازی طراحی وب سایت بتواند رفتار های خاصی را تشویق کند و جو مناسب تری برای آن رفتار ها ایجاد کند.
به همین دلیل، طراحان UX نیز از اصول طراحی گرافیک بسیار بهره می برند: جلب توجه به اندازه، ایجاد احساسات مناسب با رنگ ها، ایجاد یک جریان بصری قابل پیش بینی در سراسر صفحه و قرار دادن CTA ها در نقاط مناسب.
با این حال، بر خلاف طراحی گرافیکی سنتی، طراحان UX همچنین باید نگرانی های دیگری مانند تعامل و زمان را ایجاد کنند، و این یک رشته کاملاً جدا از همه باشد، در حالی که به طور همزمان همه آن ها مرتبط است.
به کدام یک بیشتر احتیاج دارید؟
در حال حاضر، شما باید بتوانید طراحی و توسعه وب را از هم تفکیک دهبد و می دانید که “UI در مقابل UX” به اندازه “تفاوت های UI و UX” دقیق نیست. سؤال این است که اگر نمی توانید برای همه آن ها متخصص استخدام کنید، کدام یک را باید در اولویت قرار دهید؟
هیچ پاسخی جهانی برای این وجود ندارد. از آنجا که این زمینه ها هر یک با مناطق مختلفی سروکار دارند، همه این ها به نیاز های منحصر به فرد شرکت شما بستگی دارد. با توجه به اهداف و کاستی های خود، ممکن است شما به یک متخصص بیش از سایرین نیاز داشته باشید.
برای کمک به شما در درک اینکه به کدام یک بیشتر نیاز دارید، در اینجا لیست کوتاهی از مشکلات قابل رفع توسط هر یک از زمینه ها وجود دارد. بزرگ ترین موانع خود را در زیر پیدا کنید و به دنبال زمینه مربوط به راه حل بگردید. اگر یک سایت موجود دارید، قبل از انجام برخی آزمایشات کاربر بررسی کنید که شکایت واقعی کاربران چیست.
UI
ناوبری ضعیف
عدم وجود گزینه های سفارشی سازی
عدم وجود گزینه های اشتراک اجتماعی
شکایت در مورد “چگونه این کار را انجام دهم” یا “کجا می توانم آن را پیدا کنم”
UX
نرخ تبدیل ضعیف (تعداد زیاد بازدید اما تعداد اندک تبدیل)
نرخ پرش بالا (بازدید کنندگان پس از چند ثانیه صفحه را ترک می کنند)
کاربران در حال مصرف محتوا نیستند
بازدید های پراکنده، به عنوان مثال، کاربر بعد از یک صفحه و به جای ماندن و جستجو، آنجا را ترک می کند البته برخی از مشکلات را می توان با روش های مختلف برطرف کرد. به همین دلیل مهم است که بدانید چه جنبه هایی را می خواهید اولویت بندی کنید، بنابراین راه حلی را انتخاب کنید که بیشتر با اولویت های شما مطابقت داشته باشد.
شما به عنوان یک عکاس ساعت های زیادی را صرف توسعه سبک خود و بهبود تصاویر خود کرده اید. همچنین احتمالاً سرمایه زیادی در زمینه تجهیزات، دوره ها و مسافرت ها سرمایه گذاری کرده اید. بهترین راه برای ارزش دادن به تمام این تلاش ها طراحی و ایجاد یک وب سایت عکاسی خیره کننده برای به نمایش گذاشتن کارهایتان به دنیا است.
هر کسی که به وب سایت شما دسترسی پیدا کند باید بتواند تمام سختی کار پشت هر تصویر را درک کند. با این حال، درک چگونگی ارائه بهتر عکس اصلی همیشه آسان نیست. وب سایت های عکاسان اغلب درگاه مشتریان جدید و کار بیشتری هستند.
در این مقاله 7 نکته سریع و کاربردی برای طراحی وب سایت عکاسی ارائه می دهیم.
یک اشتباه رایج در وب سایت های عکاسی این است که یک بخش “گالری” را به تمام کارهای خود اختصاص دهید. اما از آنجا که محتوای اصلی سایت شما تصاویر است، قرار دادن همه آن ها در یک مکان جالب نیست.
اگر در چند نوع مختلف عکاسی تخصص دارید یا از موضوعات خاصی طرفداری می کنید، مکان خوبی برای شروع است. به عنوان مثال، تیلر اسمیت در زیر، گالری های خود را توسط هر دو صنعت (“تجارت الکترونیکی”) و موضوع (“سگ”) متمایز کرده است.
این نه تنها هضم گالری های عکس شما را آسان می کند، بلکه به هدایت کاربران نیز کمک می کند. برخی از بازدید کنندگان شما از قبل می دانند که چه می خواهند، بنابراین اجازه دهید بدون هیچ سردرگمی مستقیماً به آنجا بروند.
2. موارد اضافی را حذف کنید
گالری های وب سایت عکاسی بی شباهت به گالری های آجر و ملات نیستند. در هر دو مکان باید فقط بهترین ها را به نمایش بگذارید. زیرا هر چیزی کوتاه و جذاب تاثیر بیشتری خواهد داشت و نمایش دادن بیش از حد به تماشاگران نتیجه خوبی ندارد.
به خصوص اگر از وب سایت عکاسی خود به عنوان نمونه کار استفاده می کنید، بهترین کار خود را به نمایش بگذارید.
با جستجو در وب سایت های عکاسان، بخش های زیادی مانند “مجموعه های شخصی” یا “آثار برگزیده” را می بینید ( آلن شالر در زیر). این یک استراتژی خوب برای نمایش بهترین های شماست.
3. اهداف خود را در اولویت قرار دهید
طراحی وب فقط در مورد ظاهر یک سایت نیست، بلکه شامل چگونگی عملکرد سایت نیز می باشد. طراحان حرفه ای وب سایت، می توانند از تنظیم سایت برای تأثیرگذاری در تصمیم گیری بازدیدکننده، تشویق به اقدامات خاص و حتی بهبود فروش استفاده کنند. اما قبل از انجام هر یک از این موارد، باید بدانید که اولویت های شما چیست.
هدف اصلی وب سایت عکاسی شما چیست؟ جذب مشتری جدید؟ فروش چاپ؟ نمونه کارها را به مشتریان احتمالی نشان می دهید؟ تحت تأثیر موزه داران و مدیران گالری هنری؟ ترتیب اولویت بندی این اهداف، بهترین استراتژی های طراحی وب را برای استفاده در سایت تعیین می کند.
به عنوان مثال، یکی از اهداف Adrieana Blazin این است که مردم را مجبور به عضویت در خبرنامه خود کند، بنابراین او در هر صفحه یک صفحه دعوت برای خبرنامه را در پایین صفحه قرار داده است – در این نوع قرار گرفتن در معرض مکرر در فضای ظریف، تمایل به تبدیل را افزایش دهید.
4. خود را در صفحه About توصیف کنید
برای رویدادهای شخصی مانند عروسی، افراد نمی خواهند افراد غریبه را استخدام کنند. راه حل این Catch-22 خاص در صفحه About – فضای موجود در وب سایت های عکاسی برای معرفی خود است.
از صفحه About استفاده کنید تا کمی درباره خود صحبت کنید و جزئیات شخصی را به اشتراک بگذارید. باز هم، هر چقدر کوتاه و مختصر و مفید باشد بهتر است. در چند پاراگرافی که دارید سعی کنید به طور کلی خود را توصیف کنید. اگر مشاغل مستقلی دارید، این مکان جای مناسبی برای درج مشتری یا نشریات قبلی خود است.
5. اطلاعات تماس خود را وارد کنید
در معرض خطر قرار دادن موارد واضح، از جمله اطلاعات تماس در سایت خود برای راه اندازی مشاغل عکاسی ضروری است. اطلاعات تماس یک هدف دوگانه دارد: از یک جهت، به بازدید کننده اجازه می دهد برای تجارت با شما تماس بگیرد، اما به همان اندازه، انسان بودن شما را نیز اثبات می کند.
استخدام شخصی از اینترنت ریسک دارد، بنابراین دیدن یک شماره تلفن یا شبکه های اجتماعی فعال، می تواند مقداری از ترس را کاهش دهد و نشان دهد که فعال هستید. از آنجا که بازدیدکنندگان شما ترجیحات مختلفی دارند، تا آنجا که می توانید اطلاعات تماس را در اختیار همه قرار دهید. حتما ایمیل، شماره تلفن و لینک به همه شبکه های اجتماعی خود را ارائه دهید.
ذکر شهر یا شهرستان نیز بسیار مهم است زیرا به بازدیدکنندگان نشان می دهد که شما در کجا فعالیت می کنید. اغلب افراد برای تهیه گزارش از رویدادها به دنبال عکاسان محلی هستند.
اینکه اطلاعات تماس خود را در کجا قرار می دهید به خودتان بستگی دارد. بسیاری از عکاسان اطلاعات تماس خود را در صفحه About خود آورده و تب “مخاطبین” را برای ارسال پیام مستقیم از طریق وب سایت رزرو می کنند. روش دیگر، «پدرو اولیویرا» شماره و ایمیل خود را در پایین صفحه اصلی قرار داده تا مردم مجبور نباشند برای تماس با او سردرگم شوند.
6. بر روی سئو تمرکز کنید
سئو یکی از مواردی است که بیشتر افراد با آن آشنایی ندارند مگر اینکه با وب سایت کار کرده باشند. یادگیری آن برای عکاسان، یک مهارت مهم است که می توانند با استفاده از آن از طراحی وب سایت عکاسی خود بیشترین بهره ببرند.
برای عکساسان محلی، یکی از مهم ترین کلمات کلیدی SEO موقعیت مکانی است. شما می توانید تا آنجا که ممکن است از شهر، شهرستان، روستا و استان مورد علاقه خود استفاده کنید. به این ترتیب افرادی که به دنبال این نام های خاص هستند، سایت شما را مشاهده می کنند. به همین دلیل شما می توانید تخصص خود را ذکر کنید. اگر عکاس عروسی هستید، تا آنجا که ممکن است از کلمات مربوط به عروسی استفاده کنید.
به جز صفحه درباره ما، وبلاگ ها یک روش عالی برای کار ارگانیک با کلمات کلیدی سئو هستند. آن ها نه تنها به جذب بازدید کنندگان جدید به سایت شما کمک می کنند، بلکه فرصتی را برای نشان دادن جنبه های انسانی شما فراهم می کنند. همچنین باعث افزایش زمان ماندن بازدید کنندگان در سایت خود می شوید که این به نو به خود به رتبه سئو سایت شما بیشتر کمک می کند.
کریستینا ماری، یک عکاس عروسی، با کلماتی مانند “عروسی” و “نامزدی” و حتی “غروب آفتاب” در وبلاگ خود کار می کند تا سایت خود را در این زمینه تقویت کند و زمانی که مردم این کلمات را جستجو می کنند، سایت او ظاهر شود.
یک نکته مهم دیگر این است که از آنجا که تصاویر زیادی را میزبانی می کنید، فراموش نکنید که متن alt را برای هر یک از تصاویر قرار دهید. این یک کار ایده آل برای تقویت کلمات کلیدی در این زمینه است.
7. استفاده از واترمارک را فراموش کنید
هیچ کس واترمارک های روی عکس را دوست ندارد. نه مخاطبان و نه عکاسان. آن ها حواس خود را از جریان بصری تصویری که کاملاً به جریان بصری بستگی دارد ، منحرف می کنند. اگر می خواهید مهارت عکاسی خود را به نمایش بگذارید، واترمارک ها فقط توانایی های شما را تضعیف می کنند. به طور خلاصه، معایب آن ها بیشتر از مزایای آن ها است.
“آیا دیگران عکس های من را نمی دزدند؟” اگر کسی بخواهد تصویر شما را بدزدد، آیا واقعاً فکر می کنید که یک واترمارک از این کار جلوگیری می کند؟ برای اطمینان از اینکه کسی نتواند تصویر را دستکاری کند، باید واترمارک را در وسط تصویر قرار دهید که در این صورت تصویر جلوه خوبی نخواهد داشت.
اگر نگران هستید، روش های دیگری نیز برای محافظت از کار شما وجود دارد. به عنوان مثال، اگر سعی کنید تصویر را از وب سایت کپی کنید، Adam Bird Photography اطلاعات مربوط به حق چاپ را نمایش می دهد.
یا با استفاده از متن ظریف اطلاعات کپی رایت را در مکانی که به راحتی قابل رویت است قرار دهید. در عکس زیر فقط به گوشه پایین سمت چپ سایت Nukem نگاه کنید.
سخن آخر
همه می توانند عکس بگیرند اما همه نمی توانند عکس خوبی بگیرند. به همین دلیل افراد عکاس استخدام می کنند. با این منطق، چقدر برای ساخت یک وب سایت خوب مهارت دارید ؟ مطمئناً، وب سایت های عکاسی تقاضای زیادی ندارند، اما اگر می خواهید از بی نقص بودن و بهینه سازی آن برای تجارت اطمینان حاصل کنید، به فکر استخدام یک طراح وب حرفه ای باشید تا سایت شما را بسازد.
قبل از اینکه یک شرکت طراحی سایت انتخاب کنید باید معیار های یک شرکت خوب را بدانید. بدون داشتن این دانش، شما خطر انتخاب یک نمایندگی اشتباه را پیش رو دارید و این می تواند اتلاف وقت و هزینه ای فاجعه بار باشد. برای محافظت از خود و تجارتتان در برابر آن خطای احتمالی، شناخت و درک این معیارهای مهم ضروری است. آن ها به شما کمک می کنند تا تجارت خود را در قله های جدید موفقیت بسازید و بدون آن ها، شما شاهد از بین رفتن قرارداد های خوب، سابقه خوب، فرصت های عالی، وقت و هزینه زیادی هستید که با انتخاب اشتباه مسبب آن بوده اید. با استفاده از این 10 معیارشما می توانید اطمینان حاصل کنید که شرکت شما یک شریک موفق در زمینه طراحی وب پیدا خواهد کرد.
در این پست به مهم ترین معیار های انتخاب شرکت طراحی وب مناسب را بررسی خواهیم کرد:
جور بودن با بودجه
قیمت گذاری مناسب
صادق بودن در مورد هزینه های اضافی
راضی بودن مشتریان سابق
نرخ ماندگاری مشتری بالا
داشتن مسئول برای هر وب سایت
پشتیبانی تمام وقت
امکان تغییر آسان
امکان انتقال وب سایت
به موقع تحویل دادن وب سایت
بودجه خود را بسنجید
حتی قبل از شروع به جستجو برای انتخاب شرکت طراحی وب باید بودجه ای را برای پروژه طراحی وب خود تعیین کنید. این بودجه می تواند خیلی کم یا نامحدود باشد، اما قبل از شروع جست و جوی شرکت ها باید تعدادی روی کاغذ داشته باشید. علاوه بر این، شما باید انعطاف پذیری بودجه خود را تنظیم کنید تا مطمئن شوید که می توانید با افزایش قیمت روبرو شوید.
بدیهی است که شما همیشه مایل به پرداخت هزینه کمتری از بودجه خود برای تأمین نیاز خود خواهید بود، اما ممکن است یک شرکت برای دستیابی به موفقیت بیشتر، گزینه های دیگر طراحی وب را خریداری کند و گرچه آن شرکت انگیزه مالی برای انجام این کار را دارد، آن ها همچنین متخصص در زمینه خود هستند، آن ها می دانند چه چیزی برای شما مفید خواهد بود. در آخر، باید برای بودجه خود رقمی در نظر داشته باشید که به شرکت خود بگویید.
این رقم باید کمتر از بودجه واقعی شما باشد تا هنگامی که خواسته های خود را از یک شرکت بررسی می کنید، از قیمت های ارائه شده توسط شرکت متعجب نشوید. وقتی به آن ها عددی کمی کمتر از متوسط می دهید (بین 75٪ تا 90٪ بودجه واقعی شما) به راحتی می توانید پیشنهاد های آن ها را بدون هزینه های سنگین قبول کنید. این بدان معنی است که هر دو طرف راضی خواهند بود و این یک راه عالی برای شروع یک همکاری موفق با یک شرکت طراحی وب است.
قیمت گذاری های آن ها را دریافت کنید
بعد از اینکه بودجه خود را مشخص کردید، باید درباره قیمت گذاری شرکت نیز تحقیق کنید. خصوصاً برای شرکت هایی که بسته های مختلف یا خدمات غیر بسته ای سفارشی تر ارائه می دهند، این می تواند زمان زیادی نیاز داشته باشد. این بخشی مهم از روند مشارکت است و اگر این کار را به خوبی انجام ندهید، ممکن است ناخواسته هزینه های خود را بیش از آنچه باید برای خدمات غیرضروری مصرف کنید.
متأسفانه، بیشتر شرکت های طراحی وب قیمت گذاری خود را منتشر نمی کنند. حتی بهترین شرکت های این صنعت نیز معمولاً برای دریافت اطلاعات بسته ها از شما می خواهند با آن ها تماس بگیرید و گاهی اوقات این اطلاعات را به شما نمی دهند تا زمانی که به آن ها بگویید می خواهید استراتژی طراحی وب را سفارشی کنید.
این مهم است زیرا اگر کسی هستید که تمام اطلاعات را از قبل می خواهد، تعداد شرکای بالقوه شما بسیار کمتر از شخصی است که می تواند با این روند همراه باشد. به طور کلی، شرکت هایی که قیمت گذاری خود را منتشر می کنند نسبت به شرکت هایی که آن را مخفی نگه می دارند، صادق تر هستند و شما نیز می توانید بهتر در مورد بودجه خود تصمیم گیری کنید. با این حال، هنوز هم غیر معمول است که قیمت ها را در فهرست آنلاین بیابید، حتی برای بهترین شرکت های موجود. خلاصه دانستن قیمت ها می تواند دلیلی بر انتخاب شدن یا نشدن یک شرکت طراحی وب سایت باشد.
در مورد هزینه ها سؤال کنید
حتی بعد از اینکه از شرکت درباره قیمت گذاری سؤال کردید، بعضی اوقات، یک شرکت لیستی از هزینه هایی را که خودش صادر می کند در اختیار شما قرار می دهد و شرکت ها همیشه در مورد آن هزینه ها به شما نمی گویند. آن هزینه ها ممکن است در چاپ نهایی قرارداد شما باشند، یا ممکن است در هیچ کجا هزینه ای را ذکر نکنند. اما اگر بدون پرسیدن هزینه های سنگینی را با شرکت طراحی وب شریک شوید، می توانید با وب سایتی که بر خلاف میل شما بودجه بیش از حدی نیاز دارد رو به رو شوید.
با توجه به این نکته، لازم است که با شرکت در مورد سیاست آن ها در مورد هزینه ها صحبت کنید. آیا بابت به روزرسانی های غیر برنامه ریزی شده سایت، هزینه ای دریافت می کنند؟ آیا آن ها ساعاتی را که ماهانه برای شرکت شما کار می کنند به صورتحساب شما اضافه می کنند؟ آیا هزینه بیشتری را برای یک بررسی بدون برنامه از سایت شما دریافت می کنند؟
پرسیدن همه این سؤالات خوب است، به ویژه اینکه هیچ موضع “استانداردی” در مورد هزینه های شرکت های طراحی وب وجود ندارد. این شما هستید که می توانید جزئیات لازم برای موفقیت را بدست آورید، به خصوص اگر در جلو ارائه نشده باشند. وقتی امور مالی خود را مرتب کردید، می توانید به مرحله مهم بعدی انتخاب شرکت طراحی وب سایت بروید.
به مشتریان گذشته آن ها نگاه کنید
هر آژانس طراحی وب مستقر و با تجربه، مشتریان سابقی دارد. اگر می خواهید بدانید که از یک شرکت خاص چه انتظاری دارید، به کارهایی که برای آن مشتری ها انجام داده اند نگاه کنید. این به شما نشان می دهد که از شرکت چه انتظاری دارید و همچنین ممکن است لیستی از مشتریان را به شما ارائه می دهد تا برای کسب اطلاعات بیشتر با آن ها تماس بگیرید یا می توانید نمونه کار های آن ها را در وبسایتشان مشاهده کنید. گرچه دیدن نمونه کار های شرکت بسیار مهم است، اما این مرحله همچنین به شما اطلاعاتی را می دهد که برای تماس مستقیم با مشتریان شرکت و پرسیدن تجربه آن ها.
اگر آن ها از آن شرکت طراحی وب تعریف می کنند، مطمئن باشید که شرکت خوبی را انتخاب کرده اید. اگر آن ها بگویند که دوست دارند زودتر قراردادشان تمام شود، پس بسیار مهم است که شرکت دیگری را انتخاب کنید. مهم این است که از مشتریانی هایی که قبل از شما آمده اند بیاموزید. آیا مشارکت با این شرکت بهترین انتخاب آن ها بوده است؟ یا آیا آن ها با هزینه ها کنار نمی آیند؟ در هر صورت، شما در مورد اینکه آیا باید با آن شرکت تماس بگیرید یا خیر، ایده روشنی خواهید داشت.
نرخ ماندگاری مشتری آن ها را دریافت کنید
هنگام مراجعه به مشتریان قبلی، می توانید از آن ها در مورد میزان ماندگاری مشتریان شرکت نیز سؤال کنید. بسیاری از شرکت ها حدود 60٪ یا بیشتر در این مورد صادق نیستند و هر چیزی که به شما نشان داده شده است، برنامه ریزی شده با خود شرکت است. به همین ترتیب، میزان ماندگاری حدود 70٪ (یا 90٪ یا بالاتر) رضایت مشتری عالی ای را نشان می دهد.
آژانس هایی که بهترین حفظ مشتری را دارند معمولاً بهترین گزینه شما برای مشارکت خواهند بود. به هر حال، یک وب سایت فقط چیزی نیست که شما سفارش دهید و راحت در دسترس شما قرار بگیرد، برای درست شدن همه چیز به زمان، استراتژی و اجرا نیاز است. اگر شرکت طراحی وب نرخ نگهداری مشتری مناسبی نداشته باشد، یکی از این عناصر مهم را از دست داده است و این بدان معناست که آن ها به شما نتیجه دلخواه شما را نمی دهند. اما وقتی شرکتی با نرخ ماندگاری مشتری بالا پیدا کردید و وقتی آن را به صورت آنلاین منتشر می کنند تا همه ببینند، مطمئن باشید شرکت با کیفیتی پیدا کرده اید و بد نیست آن را جزو انتخاب های خود بگذارید.
بپرسید چه کسی شخصاً مسئول سایت شما خواهد بود؟
وقتی با یک شرکت کار می کنید، نباید انتظار داشته باشید که آن ها بگویند که در کل موفقیت شما را بر عهده دارند. این ذهنیت منعکس کننده یک فرهنگ تعریف نشده، شل و بی انضباط است که می تواند شما را به شدت منفعل و ناشایسته نشان دهد. به جای انتظارات بی جا، شما باید نام و اطلاعات تماس مسئول سایت خود از طرف شرکت را داشته باشید که شخصاً مسئولیت نظارت بر مشکلات فنی سایت شما را بر عهده دارد. شما باید یک شماره تماس از این فرد داشته باشید که بتواند به سؤالات شما پاسخ دهد و در صورت لزوم درباره تغییر در استراتژی فعلی سایتتان با او صحبت کنید. البته اکثر شرکت ها این کار را با یک سیستم خودکار و توسط تیکت انجام می دهند.
بدون این تماس، آژانس می تواند کم کاری خود را گردن کارکنان خود بیندازد و برای رسیدگی سریع به مشکلات فنی وب سایتتان بهانه بیاورد. اما وقتی شما یک فرد مخصوص داشته باشید که پاسخگوی رضایت شما باشد، تردیدی در اینکه چه کسی مسئول است، وجود نخواهد داشت و شما نام او را در دفترچه تلفن خود دارید. البته سیستم خودکار هم می تواند به همین اندازه کارآمد باشد.
در مورد پشتیبانی تمام وقت مشتری سؤال کنید
حتی برای آژانس هایی که یک محل تماس اختصاصی به شما ارائه می دهند، ممکن است آن شخص همیشه 100٪ از اوقات در دسترس نباشد. به هر حال، آن ها انسان هستند و گاهی بیمار می شوند، مرخصی می گیرند یا مجبورند به مسائل زندگی شخصی خود رسیدگی کنند. بنابراین اگر راه های تماس آن ها در دسترس نیست، شما به یک شخص یا تیمی نیاز دارید که بتواند پشتیبانی مورد نیاز شما را ارائه دهد، خصوصاً اگر نماینده شما برای مدت زمان طولانی در دسترس نباشد.
علاوه بر این شما همچنین به اطلاعاتی در مورد سیاست پشتیبانی مشتری شرکت طراحی وب سایتی که انتخاب می کنید نیاز دارید. اگر مشکلی در سایت شما رخ داد، باید بتوانید برای رفع خطا با آن ها تماس بگیرید. هر وقت خواستید می توانید تماس بگیرید؟ یا باید ساعت های خاصی منتظر بمانید؟ در هر صورت، شما باید این اطلاعات را داشته باشید.
نحوه ایجاد تغییرات در وبسایت
گاهی اوقات، یک شرکت طراحی وب شما را با ابزار هایی که برای ایجاد تغییرات مستقیم در وب سایتتان با سیستم مدیریت محتوا (CMS) نیاز دارید، آماده می کند. با این حال، گاهی اوقات آن ها همه چیز را دور از دسترس شما نگه می دارند تا بهتر بتوانند به روزرسانی های شما نظارت کنند. فارغ از این که شرکتی که انتخاب می کنید از چه سیاستی استفاده می کند، مهم این است که شما در مورد آن اطلاعات داشته باشید تا بتوانید نحوه همکاری خود را درک کنید.
اگر می توانید مستقیماً در سایت خود تغییرات ایجاد کنید، این عالی است! و اگر به هیچ وجه نمی خواهید با این سایت سر و کار داشته باشید، می توانید مدیریت آن را به آن شرکت واگذار کنید تا همه کار ها را برای شما انجام دهد. در نهایت، این به نوع مدیر پروژه ای که دوست دارید باشید بستگی دارد. اگر کار عملی دارید، راهی برای ایجاد تغییرات در سایت خود بخواهید و اگر کارهای دیگری برای انجام دادن دارید، از آژانس بخواهید که برای شما تغییرات را مدیریت کند. شما در هر دو صورت مزایای خود را دارید.
آیا آن ها سایت شما را منتقل می کنند یا خیر؟
در برخی موارد، یک شزکت طراحی وب ممکن است با سرویس میزبانی شما کار نکند. در عوض، آن ها ممکن است خودشان میزبان باشند یا خدمات را به شرکت دیگری تغییر دهند که به عنوان یک ارائه دهنده انحصاری با آن ها قرارداد بسته اند. در صورتی که آن ها بخواهند سایت شما را به میزبان دیگری منتقل کنند، باید این را بدانید.
این قطعا جالب نیست که یک روز وب سایت خود را بررسی کنید تا فقط بفهمید که این وب سایت در جای دیگری تحت نام کاربری و رمزعبور دیگری میزبانی شده است. وقتی از این موضوع به راحتی بگذرید، یک شرکت می تواند بدون نظارت شما هر کاری را که می خواهند در سایت شما انجام دهد و این می تواند یک شروع برای فاجعه باشد.
علاوه بر داشتن اختیار رایگان بر سایت شما، انتقال سرویس میزبانی وب همچنین می تواند بر سرعت بارگیری و دسترسی وب سایت شما تأثیر بگذارد. اگر در زمینه استخراج ارز دیجیتال کار می کنید و شرکت طراحی وب شما میزبانی های شما را به جایی دیگر منتقل کند، میزان استخراج شما تفاوت پیدا می کند. گرچه این یک نمونه افراطی است، اما بسیار مهم است که شما بدانید شرکت طراحی وب سایتی که انتخاب کرده اید در کجا وب سایت شما را میزبانی می کند.
مهلت را تعیین کنید و مطمئن شوید به موقع سایت را به شما تحویل می دهند
در آخر، پس از طی مراحل قبلی، باید معیار های مشخص و قابل دستیابی را با مهلت تعیین کنید. این نوع برنامه ریزی و طرح کلی راهی را برای پیگیری پیشرفت شرکت طراحی وب به شما می دهد. اگر شریک شما زودتر از موعد مقرر کار را تحویل دهد، پس می دانید که یک شرکت خوب را انتخاب کرده اید و اگر دیر تر از موعد تحویل دهند، ممکن است بخواهید با شرکت دیگری صحبت کنید.
معیار های مشخص کیفیتی شامل تعیین دسترسی یا عدم دسترسی وب سایت شما به پلتفرم های تلفن همراه، تعداد بازدید کنندگانی که می خواهید در هر زمان پشتیبانی کنید، زمان راه اندازی سایت، برنامه نگهداری منظم و موارد دیگر است. به عنوان یک قانون کلی، هنگامی که در مورد آنچه می خواهید به دست بیاورید، موفقیت بیشتری کسب کنید، موفق خواهید بود.
اکنون شرکت طراحی وب مناسب خود را انتخاب کنید
با تمام این اطلاعاتی که در اختیار دارید، اکنون می توانید برای شریک طراحی وب سایت خود برای کسب و کار خود انتخاب مناسبی داشته باشید. بروید و بهترین شرکت را برای نیاز های خود پیدا کنید و مطمئن شوید که آن ها طبق خواسته هایی که دارید با شما کار می کنند.
و اگر به سؤالات دیگری که می خواهید بپرسید فکر می کنید، همیشه از آن ها بپرسید (یک شرکت طراحی وب خوب هرگز سؤالات شما را بدون جواب نمی گذارد و به شما پاسخ های مبهمی نمی دهد.) حال آماده اید شرکت طراحی وب مناسب را برای تجارت خود پیدا کنید. بد نیست برای شروع از ممتاز دیزاین شروع کنید. ممتاز دیزاین دارای تیمی مجرب و خلاق در زمینه طراحی وب سایت می باشد و شما می توانید با کمک این شرکت وبسایتی بی نقص با پشتیبانی قوی داشته باشید.
اینفوگرافیک ها اطلاعات پیچیده را چشم نواز، قابل درک و به راحتی قابل هضم می کنند. از همه مهمتر، آن ها نقشی اساسی در دنیای بصری فزاینده بازاریابی دارند. داشتن یک روش تأثیرگذار از نظر بصری برای نمایش آماری که شرکت شما را متمایز کند، می تواند وب سایت شما را از بقیه رقبا متمایز کند. اگر قصد دارید بیشتر در مورد تأثیر اینفوگرافیک ها در طراحی سایت بدانید با ما همراه باشید.
اینفوگرافیک چیست؟
اینفوگرافیک (یا نمودار اطلاعاتی) “نمایش بصری اطلاعات یا داده ها” است. اما معنای اینفوگرافیک چیزی بسیار خاص تر است. اینفوگرافیک مجموعه ای از تصاویر، نمودارها و حداقل متن است که به طور خلاصه درک موضوعی را ارائه می دهد. همانند مثال زیر، اینفوگرافیک ها از تصاویر جذاب و جذاب برای برقراری ارتباط سریع و واضح اطلاعات استفاده می کنند.
چرا از اینفوگرافی استفاده می شود؟
اینفوگرافیک ها برای هضم آسان اطلاعات پیچیده عالی هستند. هر زمان که بخواهید می توانند در زمینه های زیر مفید باشند:
ارائه یک مرور کلی از یک موضوع
توضیح روندی پیچیده
نمایش یافته های تحقیق یا داده های نظرسنجی
خلاصه یک پست یا گزارش طولانی وبلاگ
مقایسه چندین گزینه با یکدیگر
افزایش آگاهی را در مورد یک موضوع یا علت
وقتی لازم است خیلی سریع برای کسی چیزی را خلاصه کنید
چیزی که توضیح آن فقط با کلمات دشوار است
اینفوگرافیک قطعاً روش خوبی برای انجام این موارد است. این بدان معنی است که اینفوگرافیک می تواند تقریباً در هر صنعتی مفید باشد.
چرا باید از اینفوگرافیک در طراحی وب استفاده کنید؟
بیشتر اوقات، شرکت های خدمات حرفه ای در تهیه محتوای به یاد ماندنی مشکل دارند. وب سایت های شرکت خدمات دارای متن بسیار سنگینی هستند، اما تجزیه و تحلیل نشان می دهد اکثر افراد به طور کامل در وب مطالعه نمی کنند. بنابراین، مهم است که بازدیدکنندگان با روشی تحریک کننده بصری درگیر شوند. اینفوگرافیک به خوانندگان کمک می کند بفهمند شما چه کسانی هستید و چه کاری انجام می دهید. درک آن ها آسان، زود هضم و از نظر بصری جذاب است.
چه نوع مطالبی را باید تبدیل به اینفوگرافیک کنید؟
در حالت ایده آل، مهم است که به حقایق کلیدی در مورد شرکت خود فکر کنید که باعث می شود در صنعتتان از دیگران متمایز شوید.
سعی کنید برخی از موارد زیر را در نظر بگیرید:
تعداد موارد / پروژه های انجام شده
انواع اصلی کارهایی که انجام می دهید
تعداد دفاتر / محدوده جغرافیایی
رتبه ها و جوایز (افتخارات)
درصد مراجعات / مراجعه کنندگان مکرر
طول عمر روابط مشتری
تنوع شرکت شما
چگونه می توانید اینفوگرافیک های مؤثر در طراحی وبسایت خود ایجاد کنید؟
آنچه اینفوگرافیک ها را بسیار جذاب می کند، تصویر واضح داده ها است. هنگام طراحی اینفوگرافیک محتوا مهم است. این طراحی بسیار نزدیک به آنچه داده ها می گویند است. به عنوان مثال در وب سایت واکرهر نماد به صورت بصری بر داده های نمایش داده شده تأکید می کند. بنابراین، اولین قدم شما باید ارائه حقایق اصلی خود باشد، سپس به روش هایی برای نمایش بصری اطلاعات فکر کنید.
اینفوگرافیک های مؤثر در طراحی سایت معمولاً دارای 3 کیفیت اصلی هستند:
مطالب جالب: مطالب باید جالب و منحصر به فرد باشد.
کوتاه و شیرین: اطمینان حاصل کنید که خیلی طولانی نباشد، حداکثر 5-7 کلمه. در غیر این صورت توجه بازدیدکنندگان خود را از دست خواهید داد.
پاک کردن سلسله مراتب در اندازه: با فونت های بزرگتر پررنگ، اطلاعات اصلی را برجسته کنید. اندازه قلم توضیحات باید کوچکتر و پررنگ باشد.
کجا می توانید از اطلاعات خود استفاده کنید؟
هنگام طراحی اینفوگرافیک مهم است که در مورد محل زندگی آنها در وب سایت خود فکر کنید. داده ها می توانند یک سرمایه قدرتمند برای تبدیل بازدیدکنندگان به مشتری باشند. اینفوگرافیک شما چقدر باید برجسته باشد؟ دوست دارید کجا ترافیک وب سایت را هدایت کنند؟ پاسخ به این سؤالات در جلو می تواند به مفیدتر بودن اینفوگرافیک کمک کند. به طور کلی، دو نوع داده وجود دارد که در وب سایت های شرکت خدمات حرفه ای پیدا خواهید کرد:
مناطق شعبه دار:
درج آمار در پایین (فوتر) هر صفحه از وب سایت می تواند یک روش مفید برای هدایت بازدید به صفحات اصلی سایت شما باشد.
فلفل آماری که در کل سایت در ستون های فرعی وجود دارد نیز می تواند مؤثر باشد.
درج آمار در صفحه About Us شرکت شما می تواند بسیار مفید باشد.
مثال:
مناطق مرتبط
برجسته سازی داده های کلیدی مربوط به صفحه ای که در آن هستید، راهی عالی برای جلب توجه به افراد یا پروژه ها است.
برای مؤسسات حقوقی و مؤسسات حسابداری: صفحات درباره ما به نظر می رسد که پر ترافیک ترین مناطق سایت شما هستند. تأکید بر زمینه های اصلی تخصص، جوایز برنده شده یا سایر ویژگی های منحصر به فردی که وکلای شما دارند، می تواند به مشتریان در انتخاب شرکت شما اطمینان بدهد.
برای شرکت های A / E / C: صفحات پروژه برجسته ترین سایت ها است. تمرکز روی داده های خاص پروژه به روشی قابل هضم می تواند به تقسیم ارزش افزوده شما در یک پروژه کمک کند.
سخن آخر
امیدواریم این پست به شما کمک کرده باشد که با اینفوگرافیک بیشتر آشنا شوید و اطلاعات بیشتری در مورد مزایای استفاده از آن ها در طراحی وبسایت خود کسب کرده باشید. همچنین اگر قصد دارید رنگ هایی مناسب برای طراحی وبسایت خود انتخاب کنید، می توانید به پست ما در مورد نحوه انتخاب بلوک های رنگی مراجعه کنید.
اگر شما در حال راه اندازی فروشگاه آنلاین خود هستید، باید بدانید که مراحل زیادی برای موفقیت در تجارت الکترونیکی وجود دارد، از محصولات با کیفیت بالا گرفته تا یک لندینگ پیج زیبا، اما یکی از مهمترین اجزای مؤثر صفحه محصولی است که به خوبی طراحی شده باشد. بدون وجود این موارد ضروری، بهترین محصولات نیز قادر به فروش نیستند. چرا طراحی صفحه محصول اینقدر مهم است؟ به طور متوسط، فقط 3٪ از بازدید های فروشگاه آنلاین منجر به خرید می شود. برای مقابله با این آمار غیر جذاب، باید بهترین تجربه کاربری را به خریداران بدهید.
7 قدم برای موفقیت در صفحه محصول:
از تصاویر محصول با کیفیت بالا استفاده کنید
قیمت گذاری واضح را نشان دهید
کال تو اکشن متقاعد کننده ایجاد کنید
توضیحات محصول آموزنده را بنویسید
اهرم اثبات اجتماعی
توضیح های دقیق محصول را ارائه دهید
ثابت قدم بمانید!
این که آیا فروشنده ای تازه کار هستید یا می خواهید فروش خود را در فروشگاه موجود افزایش دهید، ما چند نکته مهم برای ایجاد یک صفحه محصول واقعاً کارآمد داریم. ما شما را با عناصر اصلی طراحی که برای صفحه محصول به آن نیاز دارید، همراه با نموه های خیره کننده برای الهام گرفتن شما، و نکات دقیق در مورد چگونگی چیدن این قطعات پازل در صفحه محصول به شما معرفی خواهیم کرد.
قبل از اینکه شروع کنید…
قبل از شروع به طراحی صفحات محصول خود، چند اصل وجود دارد که باید از قبل بدانید. موارد اصلی عبارتند از:
مخاطبان هدف شما
هویت برند شما
طرح رنگی شما
دانستن جزئیات هر یک از این زمینه ها نه تنها طراحی صفحات محصول شما را آسان تر می کند ، بلکه تأثیر بسیار زیادی نیز خواهد داشت. برای کسب اطلاعات بیشتر در مورد هر منطقه، و اینکه چگونه می تواند به شما در ایجاد صفحات محصول مؤثر تر کمک کند.
از تصاویر محصول با کیفیت بالا استفاده کنید
تصاویر محصول در صفحه محصول شما کجا قرار دارد؟
تصاویر محصول باید همیشه بالای فولد (ابتدای صفحه) قرار بگیرند، زیرا معمولاً چیزی است که بیشتر مشتریان می خواهند ابتدا به آن ها کمک کنند تا به تصمیم گیری خرید کمک کنند. در حقیقت، 93٪ از مصرف کنندگان هنگام تصمیم گیری در خرید، تصاویر را ضروری می دانند.
بالای فولد چیست؟ اگر چیزی “Above the fold” است، به این معنی است که برای دیدن آن لازم نیست که یک صفحه وب را به پایین اسکرول کنید. بعد از باز کردن صفحه بلافاصله در قسمت بالای صفحه قابل مشاهده است. اگر چیزی “زیر فولد” است، به این معنی است که باید برای دیدن آن به پایین پیمایش کنید.
اولین چیزی که شما می خواهید هنگام برنامه ریزی صفحه محصول به آن فکر کنید، عکس های محصول است و دلیل خوبی هم دارد. عکس های محصول یکی از مهم ترین ویژگی های هر صفحه محصول است. آن ها را به عنوان پایه طراحی صفحه محصول خود در نظر بگیرید. مشتریان می خواهند بدانند که دقیقاً چه چیزی را می خرند. آن ها نمی توانند محصولات شما را تحویل بگیرند و مانند اینکه در یک فروشگاه واقعی هستند به آن ها نگاه می کنند اما می توانند عکس های محصول شما را مشاهده کنند.
هرچه عکس های محصول شما بهتر باشد، تلاش در ترغیب مشتری به اینكه این محصول برای آن ها مناسب است راحت تر می شود.
عکس از محصول در سایز ها و زاویه های مختلف
نمایش قیمت واضح
قیمت در صفحه محصول شما کجاست؟ بالای فولد
قیمت گذاری باید همیشه به وضوح بالای فولد نشان داده شود، مشتریان خود را مجبور به گشتن نکنید تا دریابید که قیمت محصولات شما چقدر است! هیچ کالایی را نمی خرد بدون اینکه بداند قیمت آن چقدر است، بنابراین بهتر است آن را بالای صفحه قرار دهید. معمولاً باید آن را نزدیک به عنوان محصول یا دکمه “افزودن به سبد” قرار دهید.
مهم نیست که محصولات شما چقدر جذاب هستند، مردم می خواهند قبل از خرید از قیمت آن اطلاع داشته باشند. بنابراین منطقی است که شما قیمت ها را تا حد ممکن در صفحه محصول خود نمایش دهید!
حتی اگر کالای شما بسیار گران است، باز هم باید قیمت را واضح و در دید قرار دهید، مثلاً نزدیک عنوان محصول یا نزدیک دکمه “افزودن به سبد خرید” یک انتخاب هوشمندانه است. دلیل این امر این است که مشتری ها معمولاً به طور خودکار به این مناطق کشیده می شوند و قیمت آن به راحتی قابل تشخیص است.
روش های دیگر برای کمک به برجسته شدن قیمت عبارتند از:
با استفاده از اندازه قلم بزرگتر، قیمت شما باید یکی از بزرگترین عناصر صفحه باشد
استفاده از یک رنگ متضاد برای ایجاد “پاپ” بودن قیمت
برجسته کردن هر تخفیف، قیمت اصلی را در کنار قیمت جدید و ارزان تر نشان دهید
اگر به محض ورود به صفحه محصول، قیمت آن مشخص نیست، باید در مورد طراحی خود تجدید نظر کنید، ابتدا با استفاده از نکات بالا شروع کنید و سپس آن را روی دوستان، خانواده یا همکاران آزمایش کنید تا ببینید چقدر سریع هستند می تواند قیمت را تشخیص دهد
تمونه ای از نمایش واضح قیمت محصول
کال تو اکشن های قانع کننده ایجاد کنید
تماس برای عمل در صفحه محصول شما کجا قرار دارد؟ بالای فولد
کال تو اکشن (یا CTA) معمولاً یک دکمه یا لینک است که از کاربران می خواهد، اقدامی انجام دهند. به عنوان مثال می توان از دکمه های “افزودن به سبد خرید”، فرم “ثبت نام در اینجا” و “خرید کلی” به عنوالن کال تو اکشن ها نام برد.
CTA شما باید همیشه بالای فولد باشد، زیرا این یک قسمت اساسی در دریافت تبدیل است. اگر مردم محصول شما را دوست دارند، اما دکمه خرید آن را پیدا نمی کنند، فروش شما ضرر خواهد کرد! دکمه های کال تو اکشن (یا CTA) بخش مهمی از سفر مشتری از مرور تا خرید است. وادار کردن خریداران به کلیک بر روی CTA شما هدف اصلی صفحه محصول شما است، بنابراین ارزش دارد که برای درست کردن آن وقت بگذارید.
بدون CTA، خریداران نمی توانند محصولات مورد علاقه خود را به سبد خود اضافه کنند، به این معنی که شما خرید آن ها را از دست می دهید، که وقتی می خواهید سود کسب کنید، این اصلاً ایده آل نیست! این بدان معنی است که بالا بودن CTA در صفحه بسیار حیاتی است، باید به راحتی قابل مشاهده باشد، کلیک آن آسان و قابل فهم باشد در اینجا نکات مهم ما برای استفاده بیشتر از دعوت به عمل خود آورده شده است:
آن را بالای صفحه، بالای فولد قرار دهید، معمولاً CTA ها را در کنار تصویر محصول، در زیر اطلاعات اصلی محصول مشاهده می کنید. باید بتوانید CTA را در کمتر از سه ثانیه تشخیص دهید!
با استفاده از یک رنگ روشن یا متضاد آن را برجسته کنید، این به جلب توجه کمک می کند و نگاه مشتری را به سمت دکمه هدایت می کند.
دکمه را به اندازه کافی بزرگ کنید تا کلیک کردن آسان باشد، چه با ماوس روی دسک تاپ و چه با انگشت در موبایل، دکمه CTA باید به اندازه کافی بزرگ و در دسترس باشد.
به زبان خود فکر کنید، بیشتر CTA های صفحه محصولات می گویند “افزودن به سبد خرید” یا “اکنون بخر” که نمونه هایی از زبان مستقیم و فرمان دهنده هستند. هر کلمه ای را که انتخاب کردید، اطمینان حاصل کنید که با کلیک روی دکمه به وضوح به مشتری می گوید که چه اقدامی انجام می دهد.
نمونه از بهترین کال تو اکشن در سایت Netflix
توضیحات محصول را کامل بنویسید
توضیحات محصول در صفحه محصول شما کجا قرار دارد؟
توضیحات محصول اطلاعات بیشتری در مورد محصول به مشتریان می دهد. بهتر است یک توضیح کوتاه و شیرین از کالای بالای فولد داشته باشید که به راحتی خوانده شود، و سپس نسخه طولانی تر و دقیق تر در پایین صفحه برای مشتریانی که اطلاعات بیشتری می خواهند جایگذاری کنید.
توضیحات باید مانند داربست ساخته شده در اطراف تصاویر محصول شما باشد. توضیحات از عکس های محصول پشتیبانی می کنند، به مشتری کمک می کنند تا درک کند محصول چیست و چرا باید آن را خریداری کند. به طور خلاصه، توضیحات محصول فرصتی برای اقناع و فروش واقعی محصول است، گویا در فروشگاه کنار مشتری خود ایستاده اید.
اکثر خریداران به دنبال صفحات سریع، آسان و قابل اسکن محصولات هستند، بنابراین شما باید یک توضیح کوتاه، خلاصه و شیرین بنویسید تا بالای فولد در کنار تصاویر محصول بنشینید. سپس، در پایین صفحه، می توانید توضیحات کمی طولانی تر و دقیق تری داشته باشید که به داخل و خارج محصول وارد شود.
اهرم تأیید اجتماعی
اهرم تأیید اجتماعی در کجای صفحه محصول شما قرار دارد؟
شما همیشه باید درجه ستاره محصول یا همان اهرم تأیید اجتماعی را بالای فولد نشان دهید، زیرا این یک نقطه فروش مهم است که اکثر خریداران می خواهند بلافاصله آن را ببینند. در هر صورت خریداران می خواهند نظرات دیگران را درباره محصول مرور کنند، نظرات کامل مشتری را در پایین صفحه قرار دهید.
اثبات اجتماعی پدیده ای است که در آن افراد به احتمال زیاد کاری را انجام می دهند (یا خرید می کنند)، زیرا دیگران را مشاهده می کنند که همان کار را انجام می دهند. به همین دلیل است که به صف رستوران های شلوغ می پیوندیم و به سمت جمعیت جذب می شویم و به همین دلیل بررسی و رتبه بندی مشتری بسیار مهم است.
آیا می دانید 97٪ از مصرف کنندگان می گویند نقد های آنلاین بر تصمیمات خرید آن ها تأثیر می گذارد؟ به همین دلیل داشتن نوعی اثبات اجتماعی بالاتر از حد ضروری است، به طوری که بلافاصله برای خریداران آنلاین قابل مشاهده است. مشهورترین روش ارائه اثبات اجتماعی نشان دادن درجه ستاره محصول در نزدیکی عنوان محصول است.
از آنجا که این طرح طراحی بسیار رایج است، مشتریان شما انتظار دارند بلافاصله درجه بندی ستاره را ببینند – بنابراین آن ها را وادار نکنید که به دنبال آن بروند! همچنین باید نظرات مشتریان را در پایین صفحه قرار دهید تا خریداران بتوانند به راحتی محبوبیت این محصول را ببینند و چرا دیگران از استفاده از آن لذت می برند. این امر بسیار حیاتی است زیرا مشتریان 12 برابر بیشتر از توضیحات محصول نوشته شده توسط فروشنده اعتماد به نظرات مشتری دارند!
سایر نمونه های اثبات اجتماعی که می توانید در صفحه محصول خود استفاده کنید عبارتند از:
هشدارهای موجودی کم محصول: این مسئله فوریت و ترس از دست رفتن را ایجاد می کند.
پیامی که به خریدار می گوید چند مشتری دیگر در یک ساعت گذشته این محصول را مشاهده یا خریداری کرده اند: این به عنوان یک صف یا جمعیت مجازی عمل می کند و به خریدار نشان می دهد که افراد دیگر نیز به این محصول علاقه مند هستند.
توصیه های محصول “مشتریان همچنین مشاهده یا خریداری کرده اند”: این ترکیب اثبات اجتماعی و فروش متقابل است و یک روش عالی برای نگه داشتن خریدار در فروشگاه شما است.
محصولات مشابه را ارائه دهید
توصیه های محصول در کجای صفحه محصول شما قرار دارد؟
توصیه محصولات مشابه یک روش مفید و مؤثر برای حفظ مشتری در سایت شما، افزایش ارزش هر معامله و ایجاد یک تجربه خرید شخصی تر است. با این حال، توصیه های محصول برای جذب مشتری ضروری نیست و حتی می تواند آن ها را از محصولی که در حال حاضر مشاهده می کنند منحرف کند. به همین دلیل توصیه محصولات مشابه بهتر است در زیر فولد قرار بگیرند.
بنابراین، مشتری شما محصولی را به سبد خود اضافه کرده است، هورا! اما حالا چه؟ آن ها ممکن است به سادگی بررسی کنند یا کمی بی هدف در اطراف سایر محصولات شما کلیک کنند. مشکلی نیست، اما اگر بعد از مشاهده یک محصول راهی بهتر برای نگه داشتن مشتری برای خرید وجود داشته باشد، چه می کنید؟ توصیه های محصول بر اساس آنچه در حال حاضر مشاهده می کند، محصولات مختلفی را پیشنهاد می کند که مشتری ممکن است دوست داشته باشد.
اگر می توانید توصیه های محصولات مشابه دقیق و مفیدی از محصول را ارائه دهید، این یک روش عالی برای اطمینان از خرید دیگر است و مشتری را در محل نگه دارید حتی اگر محصول اول را مشاهده نکرده باشد. شما می توانید از موارد زیر به عنوان توصیه محصول استفاده کنید.
لیست های “مشتریان نیز خریداری کرده اند”
پیشنهاد های “موارد مشابه”
توصیه های “بهترین گزینه ها برای شما”
حتی می توانید با وعده توصیه های بهتر و متناسب، افراد بیشتری را به ایجاد حساب برای فروشگاه خود ترغیب کنید، این یک تجربه خرید شخصی تر ایجاد می کند و همچنین می تواند تعامل را افزایش دهد. روش دیگر پیشنهاد محصولات، نمایش سایر محصولات برای فروش با عکس های محصول است. به عنوان مثال، ممکن است یک مدل از چکمه و دامن و همچنین بلوز استفاده کند و مشتریان می توانند “همه را بخرند” یا “مجموعه را کامل کنند” و سبد خود را در طول راه پر کنند!
سخن آخر
سعی کنید ثابت قدم بمانید. این یک قانون مهم طراحی است. تصمیم بگیرید که همه ویژگی های قید شده را در صفحه محصول خود پیاده سازی کنید (که ما به شدت توصیه می کنیم)، موارد بیشتر را اضافه کنید یا فقط عناصر اصلی را انتخاب کنید، صفحات محصول شما همیشه باید سازگار باشد.
هر کاری انجام می دهید، گزینه های طراحی خود را تغییر ندهید، زیرا باعث سردرگمی مشتریان می شود و توجه آن ها را از محصولات شما منحرف می کند! از جمله موارد دیگری که ممکن است در طراحی به کمی راهنمایی نیاز داشته باشد می توان به موارد زیر اشاره کرد:
اکنون که مهم ترین عناصر موجود در صفحه محصول شما را مرور کرده ایم، شاید از خود بپرسید که چگونه باید همه آن ها را در کنار هم قرار دهید. برای این کار شما می توانید از مشاوران و متخصصان ممتاز دیزاین استفاده کرده و بهترین طراحی وب سایت مناسب خود را ایجاد کنید.
CSS مخفف Cascading Style Sheets با تأکید بر “سبک” است. در حالی که از HTML برای ساختار یک سند وب استفاده می شود (مواردی مانند عناوین و پاراگراف ها را تعریف می کند و به شما امکان می دهد عناصر وب سایت را جاسازی کنید)، CSS سبک این اسناد html شما را ارائه می دهد، مانند چیدمان عناصر صفحه، رنگ ها و فونت ها همه مشخص شده. کافیست به HTML به عنوان پایه و اساس کار و به CSS به عنوان گزینه های زیبایی نگاه کنید. در این مقاله قصد داریم شما را با طراحی وب با کد نویسی و با استفاده از زبان css آشنا کنیم.
فواید استفاده از CSS
اگر در صفحات وب خود از CSS استفاده نمی کنید، بهتر است هر چه زودتر آن را یاد بگیرید. CSS از پشتیبانی عالی در مرورگر های امروز برخوردار است. یادگیری و تولید کد بهتر و تمیز تر نسبت به استفاده از همه آن سبک ها به طور مستقیم در HTML شما، نسبتاً آسان است.
استفاده از CSS وب سایت های شما را به همان روشی که برنامه نویسان برای یک سال کد نرم افزار را مدوله کرده اند، مدولار می کند. کد مدولار در وب سایت شما امکان سازگاری بیشتر در طراحی و نگهداری آسان تر را فراهم می کند. CSS استاندارد جدیدی است و اکنون چندین سال است که وجود دارد. زمان آن فرا رسیده است که ساختار HTML و ارائه CSS را از هم تفکیک کنیم.
بنابراین اگر ما سال هاست که از HTML استفاده می کنیم و انواع وب سایت های عالی را با آن ها ایجاد می کنیم چرا سوییچ می کنیم؟ برخی از مزایای استفاده از CSS عبارتند از:
نگهداری و به روزرسانی آسان تر
سازگاری بیشتر در طراحی
گزینه های قالب بندی بیشتر
کد سبک
زمان بارگیری سریع تر
مزایای بهینه سازی موتور جستجو
سهولت ارائه سبک های مختلف به بینندگان مختلف
قابلیت دسترسی بیشتر
در ادامه به بررسی بیشتر برخی از این مزیت هامی پردازیم.
تفکیک سبک و ساختار
ایده اصلی در پشت CSS جدا کردن ساختار یک سند از ارائه سند است. HTML برای ساختار در نظر گرفته شده است. هرگز برای چیز دیگری در نظر گرفته نشده بود. همه خصوصیاتی که شما برای سبک کردن صفحات خود اضافه می کنید بعداً به عنوان درخواست بازدید کنندگان اضافه شد. همه این موارد اضافه شده HTML را دست و پا چلفتی جلوه می دهند و بر خلاف هدف اصلی آن از ساختار یک سند عمل می کنند. HTML وجود دارد تا به مرورگر اطلاع دهد که این مجموعه متن یک پاراگراف است و آن مجموعه متن عنوان این پاراگراف است و چیز هایی از این قبیل.
بدون وجود HTML اضافی برای فرم دهی ساختار سند شما بسیار خوانا تر است و به راحتی می توانید آن را به روز کنید. تمام CSS های مورد استفاده شما را می توان به عنوان یک فایل جداگانه به فایل HTML الصاق کرد و همچنین به روزرسانی سبک های شما را آسان تر می کند. قبل از اینکه به هر یک از صفحات خود رنگ زمینه بدهید، می توانستید “bgcolor=red” را به هر برچسب بدنه در سایت خود اضافه کنید. چه اتفاقی افتاد وقتی فهمیدید که قرمز رنگ زمینه خوبی ایجاد نمی کند و می خواهید آن را به یک خاکستری روشن تغییر دهید.
با داشتن یک سایت کوچک، باز کردن 10 پرونده و ایجاد تغییر از “FF0000 #” (قرمز) به “EEEEEE #” (خاکستری روشن) مسئله چندان مهمی نیست. اما اگر 100 صفحه داشته باشید چه می کنید؟ 1000 صفحه؟ برای کد گذاری پس زمینه در هر صفحه از سایت خود با استفاده از CSS، به طور کلی یک خط کد لازم است، کافیست متن {background: # ff000} در صفحه style شما نوشته شود. یک خط کد به راحتی در عرض چند ثانیه تغییر می کند تا بر تغییر رنگ پس زمینه در سطح سایت تأثیر بگذارد و تمام صفحات شما که به آن فایل css خاص متصل هستند نیز تغییری که شما ایجاد کرده اید را بپذیرند.
زمان بارگیری سریع تر صفحه وب
استفاده از CSS به طور کلی منجر به کد کمتری در پشت صفحات وب شما می شود که به بارگیری سریع تر یک صفحه کمک می کند. وقتی مرورگر جدولی را در کد شما مشاهده می کند، لازم است همه کد شما را دو بار بخواند. یک بار برای درک ساختار جدول و یک بار دیگر برای نمایش واقعی محتوای داخل جدول. زمان اضافی باعث کند شدن صفحه شما می شود.
استفاده از جداول در طرح بندی یک صفحه وب به طور کلی منجر به استفاده بیشتر از تصاویر در آن صفحه می شود. تصاویر اغلب سنگین ترین عنصر صفحات هستند و معمولاً مقصر اصلی کاهش سرعت صفحات شما هستند. مطمئناً می توان تصاویر را به منظور به حداقل رساندن آن ها بهینه کرد، اما با این وجود بزرگ تر از یک خط کد هستند و هر تصویر به درخواست دیگری از مرورگر به سرور نیاز دارد.
در مصاحبه اریک میر با مایک دیویدسون از ESPN، آقای دیویدسون تخمین زد که هر روز 2 ترابایت پهنای باند پس از انتقال به CSS در وب سایت ESPN ذخیره می شود. شما همچنین می توانید برای درک بهتر این موضوع به مقاله ما در مورد استفاده از فونت ها و آیکون های CSS مراجعه کنید و کد ها را ببینید.
کنترل بیشتر ارائه
CSS امکان کنترل بیشتر بر ارائه صفحات وب شما را فراهم می کند. با توجه به اینکه گاهی اوقات طراحان وب کنترل کمی دارند، خوب است بدانید که راهی برای بازگرداندن مقداری از آن وجود دارد. گذشته از این که CSS دارای گزینه های قالب بندی بیشتری نسبت به HTML است مانند گزینه هایی برای کنترل فاصله و هدایت متن، CSS همچنین می تواند تعیین کند که صفحه به ترتیب خود نمایش می دهد.
اگر از گرافیک های سنگین استفاده می کنید، می توان آن ها را آخر در کد خود قرار دهید تا اطمینان حاصل کنید که بازدید کنندگان شما حداقل می توانند متن را بخوانند در حالی که منتظر بارگیری نمودار های شما هستند. با جداول همه یا هیچ چیز نیست. شما نمی توانید یک قسمت از جدول خود را قبل از یک قسمت دیگر دریافت کنید. CSS همچنین به شما امکان کنترل بیشتر بر روی رسانه های مختلف را می دهد. می توانید کد خود را سازماندهی کنید تا دنبال کردن آن برای خوانندگان صفحه آسان تر شود و یک صفحه وب با دسترسی بیشتر ایجاد کنید.
یکی از کاربرد های متداول CSS ارائه صفحه مشابه با رسانه های مختلف در چاپی بودن اسناد شما است. صفحات وب همیشه مناسب چاپگر نبوده اند. با استفاده از CSS به راحتی می توانید چند استایل را تغییر دهید تا کاملاً متفاوت از صفحه نمایش باشند و از طریق چاپگر به راحتی ظاهر شود. بازدید کنندگان سایت شما نیز نیازی به انجام کار خاصی ندارند. آن ها می توانند صفحات شما را از طریق مرورگر چاپ کنند و سندی را که با رنگ پس زمینه و تصاویر بارگیری نشده است، دریافت کنند که مناسب چاپ شدن است.
بهینه سازی موتور جستجو
اگرچه به طور کلی مورد موافقت همه نیست، اما احتمالاً CSS می تواند به شما در یافتن صفحات شما در موتور جستجو کمک کند. از آنجا که سایت CSS شما دارای کد کمتری است و ساختار ساده تری دارد، خواندن آن نه تنها برای شما، بلکه همچنین برای ربات های موتور جستجو آسان تر است. اجازه می دهد ربات های موتور جستجو سریعتر از کد شما عبور کنند، به این معنی است که صفحات وب شما سریع تر ایندکس می شوند.
همچنین این احتمال وجود دارد که کد کمتری به عنوان متنی که چگالی کلمات کلیدی صفحه را بهبود می بخشد، تفسیر شود. با کد کمتر برای درهم آمیختن، ربات های موتور جستجو راحت تر می توانند تعیین کنند صفحه به چه چیزی مربوط می شود. همه موارد دیگر برابر بودن صفحات وب که از CSS برای طراحی خود استفاده می کنند، به احتمال زیاد رتبه بالاتری در موتورهای جستجو دارند.
CSS چگونه کار می کند؟
CSS با تعامل با عناصر HTML استایل را به صفحات وب شما می آورد. عناصر، همان عناصر جداگانه HTML یک صفحه وب هستند – به عنوان مثال یک پاراگراف – که در HTML ممکن است به این شکل باشد:
<p>This is my paragraph!</p>
اگر می خواهید این پاراگراف برای افرادی که صفحه وب شما را از طریق مرورگر وب مشاهده می کنند، صورتی و پررنگ جلوه کند، می توانید از کد CSS استفاده کنید که به این شکل است:
p{
color:pink;
font-weight:bold;
}
در این حالت، “p” (پاراگراف) “selector” نامیده می شود، این بخشی از کد CSS است که مشخص می کند کدام یک از عناصر HTML در حال گرفتن استایل است. در CSS، انتخابگر در سمت چپ اولین کروشه نوشته شده است. اطلاعات بین کروشه را اعلان می نامند و حاوی خصوصیات و مقادیری است که برای سلکتور اعمال می شود. خصوصیات مواردی مانند اندازه فونت، رنگ و حاشیه (border) هستند. در مثال بالا، “color” و “font-weight” هر دو از خصوصیات هستند و “صورتی” و “bold” مقادیر هستند. مجموعه پرانتز کامل از:
p{
color:pink;
font-weight:bold;
}
اعلامیه و دوباره، “p” (به معنی پاراگراف HTML) سلکتو است. همین اصول اساسی را می توان برای تغییر اندازه فونت، رنگ پس زمینه، تو رفتگی حاشیه و موارد دیگر استفاده کرد. برای مثال:
body{
background-color:lightblue;
}
پس زمینه صفحه شما را آبی روشن می کند، یا در مثالی دیگر:
p{
font-size:20px;
color:red;
}
یک پاراگراف با فونت 20 پیکسلی با حروف قرمز ایجاد خواهد کرد.
CSS خارجی، داخلی یا Inline؟
شاید از خود بپرسید که چگونه این کد CSS در واقع در محتوای HTML اعمال می شود. دقیقاً مانند HTML، زبان CSS kdc با یک متن ساده و از طریق ویرایشگر متن یا پردازشگر کلمه در رایانه شما نوشته می شود و سه روش اصلی برای افزودن کد CSS به صفحات HTML شما وجود دارد. کد CSS (یا Style Sheets) می تواند خارجی، داخلی یا اینلاین باشد.
CSS های خارجی به عنوان پرونده های “css.” ذخیره می شوند و می توانند برای تعیین ظاهر یک وب سایت کامل از طریق یک فایل (به جای افزودن موارد منفرد کد CSS به هر عنصر HTML که می خواهید تنظیم کنید.) مورد استفاده قرار گیرند. برای استفاده از یک css خارجی فایل های “html.” شما باید شامل یک بخش هدر باشند که به صفحه سبک خارجی لینک می شود و چیزی شبیه به این است:
با این کار فایل html به استایل شیت خارجی شما لینک داده می شود (در حالت style.css) و تمام دستورالعمل های CSS موجود در آن پرونده در صفحات لینک داده شده html اعمال می شود.
استایل های داخلی دستورالعمل های CSS هستند که مستقیماً در هدر یک صفحه خاص html نوشته می شوند. (این به ویژه اگر یک صفحه در سایتی داشته باشید که دارای ظاهری منحصر به فرد باشد بسیار مفید است.) یک صفحه سبک داخلی به این شکل به نظر می رسد:
یک رنگ پس زمینه و پاراگراف هایی با فونت آبی رنگ و سایز 20 پیکسلی متوسط، اکنون روی این صفحه html منفرد اعمال می شود.
و در آخر استایل های اینلاین قطعه هایی از CSS هستند که مستقیماً در کد HTML نوشته شده اند و فقط در یک نمونه کد گذاری اعمال می شوند. مثلا:
<h1 style="font-size:40px; color:violet;"> Check out this headline! </h1>
باعث می شود که یک عنوان خاص در یک صفحه html با فونت 40 پیکسل بنفش ظاهر شود. به طور کلی، استایل های خارجی کارآمد ترین و حرفه ای ترین روش برای پیاده سازی CSS در وب سایت هستند (پیگیری و پیاده سازی استایل سایت از یک فایل اختصاصی CSS آسان تر است)، در حالی که سبک های داخلی و سبک inline می توانند مورد استفاده قرار گیرند، بر اساس مواردی که لازم است تغییرات سبک جداگانه ایجاد شود.
سخن آخر
مزایای فایل های خارجی css بسیار است و با توجه به پشتیبانی مرورگر های مدرن، هیچ بهانه ای برای عدم یادگیری و استفاده از آن ها وجود ندارد. اگر همه موارد بالا شما را متقاعد نکرده باشند، بهتر است بدانید HTML قبلاً منسوخ شده است و در برخی از مراحل آینده دیگر در مرورگر ها کار نمی کند. با رسیدن آن زمان، در بسیاری از مرورگر های جدید نمایش داده نمی شوند و نیاز به کد گذاری مجدد دارند. کسانی که در حال حاضر از کد های css استفاده می کنند به عملکرد عادی خود ادامه خواهند داد.
صفحات فرود یا لندینگ پیج ها، به طور خاص، نوعی صفحه وب مستقل است که به منظور جذب شما برای لینک دادن، کلیک کردن و استفاده از محتوا ایجاد می شود. در حقیقت، وقتی بازدید کننده ای بر روی تبلیغات اینستاگرام یا گوگل کلیک می کند و در یکی از این صفحات “فرود می آید”، غالباً در صورت درست بودن هدف علاقه مند شده و از محصولات یا خدمات شما خریداری می کند. با ما همراه باشید با اصول طراحی لندینگ پیج ها یا صفحات فرود.
لندینگ پیج چیست؟
مسلماً ادعا می کنیم که ساختن تنها لندینگ پیج برای افزایش 638 درصدی آگهی کمی غیر منطقی به نظر می رسد. واقعیت این است که فراتر از یک طراحی موثر لندینگ پیج، شما همچنین نیاز به یک استراتژی بازاریابی و تست A / B دارید تا لندینگ پیج خود را بیش از پیش بهبود دهید. اما در هسته اصلی، یک لندینگ پیج مؤثر قبل از شروع کار یا هر چیز دیگری لازم است. سوال این است: صفحه فرود دقیقاً چیست؟
نگاهی به این لندینگ پیج Shopify بیندازید. آیا تفاوت بزرگی نسبت به یک وب سایت معمولی مشاهده می کنید؟ برای اولین بار، لندینگ پیج ها اغلب نوار های نویگیشن ندارند و نیازی به آن ها ندارند. نکته مهم در یک لندینگ پیج این است که توجه شما را جلب کند. شما نمی خواهید با فشار دادن دکمه های زیاد یا لینک های زیاد، افراد را از مسیری که می خواهید طی کنند، منحرف کنید.
در همین راستا، لندینگ پیج Shopify برای آزمایشات رایگان فقط با دو دکمه تماس برای عمل (CTA) ارائه می شود. در واقع، کل دو دکمه در کل صفحه وجود دارد. یکی در بالا وجود دارد، همانطور که در تصویر دیده می شود و دیگری در پایین صفحه. هر دو یک چیز را می گویند: “شروع آزمایشی رایگان”.
این کار مخاطبان شما را در این صفحه بسیار محدود می کند، آن ها می توانند آدرس ایمیل خود را برای یک دوره آزمایشی رایگان وارد کنند یا وارد کنند. همراه با نوشتن مطالب متقاعد کننده، دشوار نیست که کسی کلیک کند، به خصوص اگر او قبلاً به خدمتی مانند Shopify علاقه داشته باشد.
در واقع، یک صفحه فرود فقط به چند عنصر ساده احتیاج دارد: عنوان و دکمه یا لینک CTA.
5 اصل طراحی لندینگ پیج
سادگی همیشه عالی است
بیایید نگاهی به لندینگ پیج Chase بیندازیم.
آیا می توانید در این صفحه بگویید که Chase می خواهد شما چه کاری انجام دهید؟ آیا می خواهد محصولات آن را ببینید یا وارد سیستم شوید؟ آیا می خواهد در مورد کارت های اعتباری آن بیشتر بدانید؟ در نگاه اول، تشخیص آن اساساً غیرممکن است.
این خوب نیست، زیرا یک نگاه معمولاً تمام آن چیزی است که برای انجام یا شکستن یک معامله لازم است. حتی پس از جالب ترین و جذاب ترین تبلیغات فیس بوک، یک سرنخ پیچیده منجر به رفتن بازدید کننده ها از این صفحه خواهد شد، زیرا آن ها هیچ ایده ای ندارند که چیس در تلاش است چه چیزی را بفروشد. در واقع، این صفحه بیشتر شبیه یک صفحه اصلی است تا یک لندینگ پیج و این یک خصوصیت منفی بزرگ است.
یک قاعده کلی خوب این است که به “نسبت توجه” در لندینگ پیج خود توجه کنید؛ به عبارت دیگر، نسبت موارد غیر قابل کلیک به مواردی که می توانند و باید کلیک شوند. پلتفرم لندینگ پیج Unbounce در واقع توصیه می کند که در “نسبت توجه” به 1: 1 پایبند باشید. برای هر مورد، اعم از متن یا تصویر یا مجموعه ای از موارد، فقط باید یک دکمه وجود داشته باشد. البته این فقط یک قانون کلی است.
یک مثال خوب در مورد اهمیت ساده نگه داشتن لندینگ پیج صفحه قدیمی Trulia است. اولین چیزی که در این صفحه مشاهده می کنید نام شرکت است و سپس یک سوال: “خانه شما چقدر ارزش دارد؟” این شما را در مورد اینکه Trulia چیست مطلع می کند: وب سایتی برای خرید، اجاره و فروش خانه.
پس یک قسمت و یک دکمه تنها چیزی است که لازم است.
CTA های خود را محدود کنید
اگر صفحه فرود Chase را به یاد بیاورید، متوجه کار دیگری می شوید که شرکت به اشتباه انجام داده است: صفحه فرود چندین CTA دارد.
آیا قصد ثبت نام یا کسب اطلاعات بیشتر در مورد Chase را دارید؟ دشوار نیست که تشخیص دهید بیش از یک دکمه در این لندینگ پیج وجود دارد. هر دو دکمه کاملاً یکسان هستند اما کار های کاملاً متفاوتی انجام می دهند. این فقط بر روی تبدیل شما تأثیر منفی می گذارد.
پس هر دکمه باید دقیقاً همان کاری را انجام دهد که می گوید.
البته، این یک قانون سخت نیست. در حقیقت، دیدن چندین دکمه بسیار معمول تر است، شاید به این دلیل که یک شرکت می خواهد دو سرویس مشابه ارائه دهد، یا ممکن است برای بازار های مختلف مانند لندینگ پیج “آکادمی خان” جذاب باشد.
لندینگ پیج آکادمی خان در مورد اینکه چه کسی باید روی کدام دکمه کلیک کند صریح است و در گوشی، این دکمه ها به طور هوشمندانه به یک دکمه تبدیل می شوند که می گوید: “از اینجا شروع کنید”.
با کلیک بر روی دکمه به پایین صفحه هدایت می شوید، جایی که دکمه هایی وجود دارد که نشان دهنده همان سه گروه افراد است: یاد گیرندگان، معلمان و والدین و حتی یک دکمه برای بازگشت شما به بالای صفحه وجود دارد. (این توجه به جزئیات از نظر روشی که این CTA ها در تلفن همراه و دسک تاپ تغییر می کند بسیار حیاتی است تا بتوانید مخاطبان خود را بدون توجه به اینکه از کجا می آیند حفظ کنید).
با پیمایش در صفحه، چندین CTA وجود دارد. تفاوت بین نحوه استفاده CTA از صفحه Khan Academy در مقایسه با دیگران در این است که آن ها اساساً به همان دکمه های بالای صفحه لینک دارند. یک دکمه وجود دارد که مربوط به سه گروه نیست، اما مستقیماً به متن بالای آن لینک دارد.
در پایان، لندینگ پیج آکادمی خان، علی رغم داشتن چندین دکمه با چندین CTA، واضح، پاسخگو و ساده است. آن ها CTA ها را با استفاده از متن و تصاویر شکسته و مطمئن می شوند که حداکثر سه دکمه به طور هم زمان روی صفحه شما قرار دارد و این روش خوبی برای درج چندین CTA در صورت لزوم است.
البته در پایان روز داشتن یک CTA یا نوع CTA منفرد همچنان صفحه فرود شما را موثرتر می کند.
سلسله مراتب بصری
وقتی به “لندینگ پیج Unbounce” برای دوره لندینگ پیج آن نگاه می کنید، اولین چیزی که شما را به خود جلب می کند چیست؟ بیشتر مردم قبل از هر چیز دیگری این عنوان را می دیدند و دلیل خوبی برای آن وجود دارد. بسیاری از ما خواننده های تنبلی هستیم- صفحه ای را اسکن می کنیم و به دنبال هر چیزی می رویم که بیرون می آید. اگر هیچ کاری نکرد، صفحه جالبی نیست و احتمالاً بلافاصله آن را می بندیم.
به همین دلیل سلسله مراتب بصری مهم است. شما باید صفحه فرود خود را به گونه ای مهندسی کنید که بالاترین مورد در سلسله مراتب بصری شما را به جالب ترین تبدیل کند. قبل از اینکه اطلاعات اضافی را روی آن ها قرار دهید، توجه مخاطب را جلب کنید. این همان چیزی است که صفحه فرود Unbounce را در اینجا بسیار کارآمد می کند.
آن ها دقیقاً می دانند که چگونه آیتم های صفحه خود را به گونه ای قرار دهند که تعداد زیادی مخاطب ایجاد کند. با وجود شکستن قانون نسبت توجه 1: 1، تا حدودی مینیمالیسم است. آن ها با بررسی دقیق نحوه مطالعه یا اسکن وب سایت توسط افراد و استفاده کامل از آن به این مهم دست می یابند. در واقع، این صفحه به طور خاص از الگوی F-scan استفاده می کند که مردم اغلب از آن برای دیدن وب سایت های متن دار استفاده می کنند.
محققان گروه نیلزن نورمن با استفاده از ردیابی نگاه، نشان دادند که وقتی صحبت از وب سایت های دارای متن زیاد می شود، خوانندگان اغلب از بالا به پایین می روند، موارد بزرگتر و مهمتر را به نوعی با الگوی F با بسیاری از شاخه ها اسکن می کنند.
مشاهده جالب دیگر این است که الگو های اسکن اغلب دو یا سه کلمه را در خط رها می کنند. به طور کلی، این بدان معنی است که خوانندگان شما واقعاً علاقه مند به چند کلمه از چند جمله اول صفحه اصلی شما هستند. در نظر گرفتن اینکه چگونه کاربر معمولی اینترنت از طریق صفحه وب شما به نظر می رسد، روش خوبی برای کنترل نحوه واکنش آن ها به CTA شماست.
یک نکته خاص برای کنترل سلسله مراتب بصری نیز استفاده از gaze است.
در این تحقیق، واضح است که وقتی تصویری از این دست را می بینیم، در حالی که شخصی به جهتی خاص نگاه می کند، چشمان ما به دنبال نگاه او هستند. این کمک می کند تا توجه به عناصر خاص، در این مورد شامپو جلب شود.
روش خوب دیگر برای کنترل توجه خواننده شما پوشاندن عناصر مهم است. این کار معمولاً با فرم ها انجام می شود. آن ها را در جلو و مرکز طراحی لندینگ پیج قرار دهید.
Freshsales این کار را به ویژه با ایجاد تضاد در رنگ زمینه های جذب سرب با پس زمینه، انجام می دهد. فرم را پاپ می کند و روشن می کند که CTA چیست. علاوه بر این، مسدود کردن این عناصر در کنار هم به ساختار دهی صفحه کمک می کند و منجر به بررسی این نسخه آزمایشی رایگان می شود.
کاربر را در اولویت قرار دهید
با توجه به نکات قبلی، توجه کاربران هنگام طراحی لندینگ پیج از اهمیت بالایی برخوردار است. یک لندینگ پیج زیبا با عناصر متحرک و تصاویری جالب ممکن است سرنوشت شما را عوض کند، اما وقتی نوبت به تبدیل می رسد، نکات و ترفند های امتحان شده و درست وجود دارد که باید از آن ها آگاه باشید.
اول از همه، اطمینان حاصل کنید که وب سایت شما ریسپانسیو است. این بدان معناست که مهم نیست کاربر شما از چه دستگاهی به لندینگ پیج شما دسترسی دارد، عالی به نظر می رسد و عناصری که برای جلب توجه آن ها و تبدیل آن ها استفاده می کنید به خوبی قرار گرفته اند.
نمودار مقایسه بازدید از وبسایت ها با مبایل و دسکتاپ
در چند سال گذشته، گوشی های همراه با جهشی پیشرفت کرده اند و اکنون اکثر کاربران اینترنت صرفاً از طریق گوشی های خود به اینترنت دسترسی پیدا می کنند. این باعث می شود لندینگ پیج ریسپانسیو از اولویت بیشتری برخوردار شوند.
هر چند فقط این نیست. شکستن قالب و ارائه تجربه لندینگ پیج برخلاف آنچه که کسی تاکنون دیده است، وسوسه انگیز خواهد بود، خواه این کار با بازاندیشی در نحوه پیمایش یک صفحه یا طراحی مجدد ساختار صفحه اصلی باشد.
در اینجا مثالی از یک لندینگ پیج کاملاً ابتکاری وجود دارد.
این لندینگ پیج که برای Landbot.io، سرویس چت بات ساخته شده است، در واقع یک چت بات است! این یک ایده واقعاً خلاقانه است و بلافاصله توجه شما را به خود جلب می کند. اما بگذارید حقیقت را بپذیریم، اگر این بانک شما بود یا یک فروشگاه خرده فروشی محلی، احتمالاً چندان منطقی و جالب نبود.
خلاقیت و نوآوری جای خود را دارد. اما خلاقیت به خاطر خلاقیت ممکن است منجر به هدایت لندینگ پیج شما در مسیر اشتباه شود. این می تواند خوانندگان شما را در مورد آنچه لندینگ پیج شما در واقع به فروش می رساند گیج کند و بدتر از همه اینکه خوانندگان حتی ممکن است متوجه نشوند که در یک لندینگ پیج هستند!
نکته مهم دیگری که باید در وهله اول قرار دادن کاربر خود به آن فکر کنید، خوانایی است.
مورد زیر مشکل طراحی وب ناخوانا را نشان می دهد. عنوان “The Perfect Touch” روی زمینه خاکستری، سیاه است و خواندن آن را دشوار می کند. این تاثیری که عنوان خوب می تواند بگذارد را کاملا به تأثیر منفی تبدیل می کند.
در حقیقت، در اینجا تقریباً به نظر می رسد که زیرنویس سفید مهمترین بیت صفحه است در حالی که نباید باشد. ناخوانا بودن می تواند سلسله مراتب بصری را در یک لندینگ پیج عالی از بین ببرد. این یک مشکل رو به رشد است، به خصوص اینکه لایه برداری از کپی خود را روی یک تصویر خوب زیبا، یک تاکتیک معمول طراحی وب، به طور فزاینده ای وسوسه انگیز است.
لندینگ پیج چشم نواز بسازید
این ممکن است با توجه به نکته ای که ما در حال حاضر بحث کردیم، کمی بر خلاف اصول به نظر برسد، اما ایجاد یک لندینگ پیج که برجسته باشد بسیار مهم است. امروزه از لندینگ پیج ها در کلیه صنایع و مشاغل استفاده می شود. برای رقابت، یک صفحه فرود باید واقعاً از بین برود، چه از نظر زیبایی چه کپی قوی.
در مورد کسپر، کپی واضح و روشن با ویژگی های مورد علاقه توصیفات مشتری به ایجاد یک لندینگ پیج مؤثر کمک می کند. حتی بدون طراحی پیشگامانه، یک تصویر ساده که به خوبی مفهوم اصلی Casper و همچنین طراحی واضح را اجرا می کند که می تواند لندینگ پیج را به راحتی به سطح بالاتری برساند.
مینیمالیسم ساده نیز در حال افزایش است، و دلیل خوبی هم دارد، همانطور که در لندینگ پیج Quip مشاهده می شود. واضح، ساده و تمیز است که خواندن و درک آن را آسان می کند. بر خلاف لندینگ پیج های معمولی با متن سنگین، داشتن یک صفحه فرود تقریباً برهنه مانند این می تواند به برجستگی شما کمک کند.
در طرف مقابل، ظاهری خوش رنگ و جوان مانند ظاهری که اسنپ چت در اینجا به دنبال آن است نیز می تواند نگاه ها را به خود جلب کند. البته، اطمینان از اینکه طراحی صفحه اصلی واقعاً متناسب با مخاطب است، ضروری است. سایتی که چیزی را برای مخاطبان مسن تر بفروشد ممکن است با چنین مضمونی موافق نباشد.
بسیاری از تاکتیک های دیگر که یک طراح می تواند برای ایجاد یک لندینگ پیج منحصر به فرد و مؤثر استفاده کند، خواه ایجاد انیمیشن های جالب باشد و یا انجام کاری غیر منتظره. اصلی ترین چیزی که باید به آن فکر کنید این است که مخاطبان شما می خواهند چه چیز هایی را ببینند و چه اطلاعاتی را می خواهید به دست آورید.
