در قسمت قبل 3 مرحله اساسی در طراحی سایت را با هم مرور کردیم. امروز نیز در ادامه این مقاله به بررسی باقی مراحل ضروری طراحی سایت می پردازیم.
04. چیدمان خود را ساختار دهید
مفهوم سازی طرح بندی شما در مرحله بعدی است که ما را به سمت طراحی وب هدایت می کند. امروزه اکثر پلتفرم‌های ایجاد وب دارای قالب‌های طراحی وب‌سایت یا ابزارهای چیدمان مانند کانتینرها هستند. اینها مخصوصاً در صورتی که نیاز به طراحی سریع یک وب سایت داشته باشید مفید هستند. و در حالی که الگوها دارای طرح‌بندی‌ها، مفاهیم و ویژگی‌های از پیش ساخته شده‌اند، می‌توانید آنها را مطابق با رضایت خود سفارشی کنید.
البته، ممکن است بخواهید وب سایت خود را از ابتدا بسازید، در این صورت می خواهید قبل از ایجاد طراحی وب خود، یک طرح اولیه ایجاد کنید. Wireframes یک ابزار محبوب برای طراحی یک وب سایت در مراحل اولیه آن است. چه از قالب های Wireframe به صورت آنلاین استفاده کنید و چه آنها را با دست ترسیم کنید، نمایش های بصری به شما این امکان را می دهد که طرح بندی های مختلف را طراحی کنید و معماری اطلاعات سایت خود را ترسیم کنید.
طراحی سایت حرفه ای با وبکده
نکاتی برای ساختار بندی طرح وب سایت شما:
یکی از مواردی که باید در هنگام طراحی چیدمان یک وب سایت در نظر بگیرید، سفر کاربر است. یک بازدید کننده در وب سایت چه کاری باید انجام دهد؟ اهداف اصلی خود را با تیم یا مشتری خود تعریف کنید و یک سفر کاربری طراحی کنید که این اهداف را برآورده کند.
در حالت ایده‌آل، سفر کاربر به بازدیدکننده جدید وب‌سایت از یک صفحه ورودی به تبدیل (خواندن محتوای کلیدی، تماشای یک ویدیو، پر کردن فرم، انجام خرید و غیره) کمک می‌کند. به عنوان یک طراح، وظیفه شما این است که به آنها کمک کنید تا آنجا که ممکن است سریع و بدون فکر به آنجا برسند.
از نظر سرعت، سفر کاربر تنها باید با چند کلیک یا چند مرحله انجام شود. سلسله مراتب بصری عناصر شما باید به گونه ای ساختار یافته باشد که عمل مورد نظر برای کاربر واضح باشد. و آنها نباید در مورد چگونگی رسیدن به آنجا فکر کنند.
اگر تبدیل مورد نظر خرید باشد، برای مثال، هر عنصر مانند تصاویر، متن و دکمه‌ها باید به صفحه محصول منتهی شود. از صفحه محصول، مرحله بعدی باید پرداخت و خرید باشد.
05. صفحات وب جداگانه ایجاد کنید
هر بار که یک وب سایت طراحی می کنید، در نظر می گیرید که چه صفحات جداگانه ای باید گنجانده شود. از صفحات اصلی و وب‌سایت‌های تک صفحه‌ای گرفته تا صفحات فرود و «درباره ما»—هر صفحه وب هدف خاص خود را دارد و به طراحی و محتوای نوشتاری خاص خود نیاز دارد.
صفحه نخست:
50 میلی‌ثانیه طول می‌کشد تا با طراحی وب‌سایت خود تأثیر اولیه خوبی داشته باشید، و صفحه اصلی معمولاً همین است. هنگامی که یک بازدیدکننده برای اولین بار به وب سایت شما می رسد، باید یک ارتباط بصری فوری با نام تجاری وجود داشته باشد، که استفاده از رنگ ها، فونت ها، تصاویر و لحن صدا و لوگوی مطابق با هویت برند مشتری را مهم می کند.
صفحه فرود:
صفحات فرود به یک هدف بازاریابی یا فروش خدمت می کنند، از ایجاد سرنخ گرفته تا تشویق به اشتراک و موارد دیگر. هر صفحه فرود باید یک مرحله بعدی برای کاربر داشته باشد، یا تبدیل مورد نظر که به عنوان بخشی از طراحی برنامه ریزی شده است.
با درخواست تنها اطلاعاتی که در فرم‌ها لازم است، تبدیل‌ها را تا حد امکان آسان کنید و از ابزارهای اعتبارسنجی استفاده کنید که فرمت‌های ورودی مناسب را برای به حداقل رساندن اشتباهات بررسی می‌کنند.
صفحه "درباره ما" و سوالات متداول:
سوالات متداول و سایر منابع خودیاری، مانند صفحه «درباره» را بگنجانید تا کاربران مجبور نباشند برای یافتن اطلاعات اضافی که ممکن است نیاز داشته باشند، وب سایت را ترک کنند. به نوبه خود، این منابع باید به تبدیل مورد نظر مشتری منجر شود.
صفحه تماس:
تاکتیک‌های قیف تبدیل مانند فرم تماس، ثبت نام حساب، امکان اشتراک در خبرنامه‌ها یا دانلود دیجیتال را ادغام کنید. هر یک از این اقدامات باید در ازای آدرس ایمیل یا سایر اطلاعاتی که به عنوان سرنخ آینده جمع آوری می کنید، چیزی را به کاربر بدهد که می خواهد.
نکاتی برای ایجاد صفحات وب جداگانه:
هر صفحه را طوری طراحی کنید که یک کار برای کاربر وجود داشته باشد، و این دستورالعمل را به طور واضح بیان کنید، در مقابل گیج کردن کاربر با درخواست تعداد زیادی تعاملات مختلف در همان صفحه. از دکمه های بزرگ با میکروکپی استفاده کنید که توضیح می دهد در آینده چه اتفاقی خواهد افتاد. هر صفحه را با یک هدف واحد طراحی کنید. آن را ساده نگه دارید.
06. طراحی را سفارشی کنید
اکنون که پایه های شما تنظیم شده است، زمان تعیین جزئیاتی مانند رنگ، جلوه ها، انیمیشن و سایر جزئیات بصری فرا رسیده است. برای اکثر طراحان حرفه ای، این بخش سرگرم کننده نحوه طراحی یک وب سایت است. همچنین اساسی ترین است.
همراه با اطلاعاتی که برای تحقیقات بازاریابی و طراحی به دست آورده اید، از گرایش های طراحی دیجیتال ایده بگیرید و نمونه های دیگر وب سایت را برای الهام گرفتن مرور کنید. با این یافته ها، و معماری اولیه وب سایت شما، زمان تصمیم گیری برای طراحی این عناصر فرا رسیده است:
طرح رنگی
چه پرانرژی باشد، چه مینیمالیستی یا آرامش بخش - طرح رنگ مشتری شما پیامی را برای بازدیدکنندگان ارسال می کند و بر تجربه آنها تأثیر می گذارد. این تصمیمات نه تنها هویت برند را منعکس می کند، بلکه تأثیری بر کاربر می گذارد. برای مثال، ما شاهد بسیاری از برندها بوده‌ایم که با استفاده از پالت‌های آینده‌نگر الهام‌گرفته از دهه 90، روند Y2K را به وب‌سایت‌های خود آورده‌اند. این تصمیم از قدرت نوستالژی استفاده می کند تا بر کاربران تأثیر بگذارد.
تصویرسازی
تصاویر وب سایت می تواند شامل هر چیزی باشد، از تصاویر گرفته تا عکاسی محصول و انیمیشن های سبک Lottie. بسته به زبان بصری و منابع موجود، ممکن است در نهایت از عکس‌ها و تصاویر سفارشی استفاده کنید یا از مجموعه‌های هنری برداری و عکس‌های استوک انتخاب کنید.
هنگام طراحی یک وب سایت، مطمئن شوید که تصاویر شما بالاترین کیفیت و نسبت صحیح را در هر اندازه صفحه حفظ می کنند. این بر نحوه تجربه بازدیدکنندگان در دستگاه های مختلف تأثیر می گذارد. اگر در حال طراحی یک وب‌سایت واکنش‌گرا هستید، می‌توانید اندازه تصاویر خود را با CSS تغییر دهید تا این کار را کامل کنید.
فیلم های
ویدئوها می‌توانند هم اهداف بازاریابی و هم اهداف تزئینی را داشته باشند و راهی عالی برای جذب بازدیدکنندگان و بیان داستان برند شما هستند. می‌توانید به روش‌های مختلف، از ادغام‌های YouTube گرفته تا نمایش رسانه‌های خود با VideoBox و استفاده از ویدیوهای شفاف، این تصاویر را زنده کنید.
تایپوگرافی
هنگام نمایش طرح بصری خود، استفاده از زبان و تایپوگرافی را در نظر بگیرید. طرح شما باید با یک نسخه قوی ساخته شود که پیام مشتری شما را منتقل کند. با در نظر گرفتن این موضوع، ارتباط بصری سایت شما به همان اندازه مهم است، به این معنی که انتخاب های تایپوگرافی مانند فونت و اندازه بر نحوه دریافت پیام شما توسط بازدیدکنندگان تأثیر می گذارد.
بهترین فونت ها برای وب سایت ها فونت هایی هستند که خوانا، جذاب و مرتبط باشند. از آنجایی که سایتی که طراحی می‌کنید احتمالاً با استفاده از دستگاه‌ها و مرورگرهای مختلف قابل دسترسی است، توجه به نکات فنی بصری مانند سازگاری بین مرورگرها نیز مفید است. مهمتر از همه، پیروی از دستورالعمل های تایپوگرافی وب برای فاصله، کنتراست و اندازه، دسترسی، خوانایی و ظاهر را تقویت می کند.
پس زمینه وب سایت
پس زمینه یک عنصر اساسی و البته قدرتمند طراحی وب است که نحوه تجربه بازدیدکنندگان از سایت شما را شکل می دهد. چه یک تصویر، یک پس‌زمینه گرادیان، ویدیو یا رنگ‌های یکپارچه باشد—تصاویر جذاب در پس‌زمینه شما می‌تواند به‌عنوان ابزاری برای تأکید بر جنبه‌های خاصی از سمت شما یا تنظیم لحن برای بازدیدکنندگان استفاده شود.
بسیاری از طراحان مدرن پس‌زمینه وب‌سایت خود را با افکت‌های پیمایش جفت می‌کنند، که راهی عالی برای تسهیل تجربه مرور پویاتر و روان‌تر برای بازدیدکنندگان است.