اصول چیدمان وب سایت
در این مقاله خواهید خواند:
اصول چیدمان وب سایت
چیدمان عالی وب سایت یک معماست: اغلب زمانی بهترین کار است که اصلاً مورد توجه قرار نگیرد. به این معنا که اگر طراح کار خود را به درستی انجام داده باشد، کاربر میتواند مشخصات محصول، سبد خرید، پیشنهادات تبلیغاتی و مهمتر از همه دکمه خرید را بدون نیاز به فکر کردن در مورد آن بیابد. به هر حال، صرف زمان بیشتر برای فهمیدن نحوه استفاده از یک وب سایت به معنای توجه کمتر به محتوای واقعی آن است.
طراحی چیدمان وب سایت در مورد ایجاد تعادل بین زیبایی شناسی و عملی بودن است. سایت قطعاً باید زیبا به نظر برسد، اما مهمتر از آن، باید به کاربر آنچه را که برای آن آمده است به بهترین نحو ممکن ارائه دهد. کاربران برای صفحات وب دشوار صبر کمی دارند، به همین دلیل است که بالاترین نرخ پرش در ده ثانیه اول بازدید از یک وب سایت رخ می دهد. درست است، یک چیدمان خوب وب سایت همیشه باعث ماندن بازدیدکنندگان نمی شود (مخصوصاً اگر محتوا کم حجم باشد)، اما مطمئناً نمی خواهید دلیل خروج آنها باشد.
برای اطمینان از اینکه وبسایتی دریافت میکنید که بازدیدکنندگان شما از آن بازنمیگردند، ما این راهنمای اصول طراحی طرحبندی وبسایت را گردآوری کردهایم. ما اصول اولیه کارهایی که یک طراحی خوب باید انجام دهد، تکنیک های کلیدی برای چیدمان موثر وب سایت و رایج ترین انواع چیدمان وب سایت را بیان می کنیم.
اهداف طرح بندی وب سایت
–
هر چند ساده به نظر می رسد، تنها هدف از چیدمان وب سایت پشتیبانی از اهداف وب سایت است، خواه تبدیل، آگاهی از برند، سرگرمی یا اهداف دیگر. اما اهداف یک وبسایت از طریق محتوا بیان میشوند، و طراحی طرحبندی نحوه ارائه آن محتوا را به طور مؤثر توصیف میکند. با این اوصاف، در اینجا برخی از عملکردهای رایجی که یک طرحبندی وبسایت میتواند انجام دهد، آورده شده است:
نمایش اطلاعات: یک طرحبندی خوب وبسایت، اطلاعات را سازماندهی میکند تا در یک توالی واضح با هم قرار گیرند، اسکن آن آسان است، به مهمترین عناصر وزن میدهد و ابزارهای کاربر را برای یافتن و استفاده بصری میسازد.
تعامل کاربر: یک چیدمان خوب وب سایت، صفحه را از نظر بصری جذاب می کند، چشمان کاربر را به سمت نقاط مورد علاقه هدایت می کند و آنها را تشویق می کند که به مرور در سایت ادامه دهند.
برندسازی: یک چیدمان وب سایت خوب در برندسازی نیز نقش دارد، با استفاده از فاصله، تراز و مقیاس به روش هایی که با برند شرکت سازگار است.
این اهداف سطح بالا همان چیزی است که طراحی طرحبندی وبسایت را هدایت میکند، اما قبل از اینکه به طرحبندیهای وبسایت خاص نگاه کنیم، اجازه دهید نحوه تحقق این اهداف را با جزئیات بیشتری مورد بحث قرار دهیم.
فرآیند طراحی پوسته وب سایت
–
فرآیند ترسیم طرحبندی وبسایت باید در مراحل اولیه ایجاد یک وبسایت اتفاق بیفتد، یعنی زمانی که استراتژی وبسایت خود را تعیین کردید، اما قبل از اینکه وارد یک برنامه گرافیکی برای ایجاد رابط شوید.
طرحبندی وبسایت از طریق یک قاب سیمی، که یک نقشه استخوانی اساسی است که نشان میدهد چگونه محتوا با هم تطبیق میشود، تجسم میشود. مهم است که Wireframing را از طراحی وب متمایز کنیم، که کل فرآیند ایجاد گرافیک های جلویی و سایر تصاویر برای صفحه وب است. طراحی چیدمان وب سایت بخش بزرگی از طراحی وب است و با Wireframing شروع می شود. در حالت ایدهآل، طراحی بصری باید از چیدمان وایرفریم پیروی کند تا عناصر گرافیکی بهجای ترجیحات زودگذر زیباییشناختی، به صورت استراتژیک قرار گیرند.
با وجود این موضوع، مراحل ایجاد طرحبندی وبسایت در اینجا آمده است:
همه حوزه های محتوا را شناسایی کنید. وایرفریم ها معمولا محتوا را با مربع ها و مستطیل های ساده نمایش می دهند، خواه یک تصویر یا یک بلوک متن. مهم است که از قبل بدانید چه مقدار محتوا و در اندازه تقریبی هر قطعه (یا تعداد کلمات) دارید تا بتوانید عناصر را با دقت در کنار هم قرار دهید.
یک سری وایرفریم و نمونه اولیه ایجاد کنید. طرحبندی میتواند به سادگی نقاشی با قلم و کاغذ باشد، اما برنامههای زیادی (مانند Whimsical) نیز وجود دارد که به سادهسازی فرآیند اختصاص داده شدهاند. از آنجایی که وایرفریمها قرار نیست آثار هنری دقیقی باشند، میتوانید چندین اثر هنری را در یک زمان ایجاد کنید. حتی اگر عاشق اولین ایده خود شده اید، باید قاب های سیمی بیشتری طراحی کنید تا تخیل خود را تقویت کنید و به خودتان گزینه هایی بدهید. بدون داشتن گرافیک فانتزی که حواس شما را پرت کند، می توانید بر روی تجربه کاربر تمرکز کنید و کشف کنید که کدام ترتیب برای آنها بصری تر است. مطمئن شوید که همه اندازههای صفحه نمایش را در نظر میگیرید—توصیه میشود که از طرحبندی دستگاههای تلفن همراه شروع کنید و از آنجا به سمت بالا بسازید.
تست کنید، بازخورد جمع آوری کنید و تکرار کنید. هنگامی که چند گزینه دارید، مطمئن شوید که از همکاران خود بازخورد جمع آوری کرده اید. برنامه هایی مانند Invision و Figma به شما امکان می دهند نمونه های اولیه تعاملی ایجاد کنید تا بتوانید به راحتی دکمه ها و ناوبری را بدون ساختن یک صفحه وب واقعی آزمایش کنید. داشتن تصاویری از صفحه نمایش کاربران آزمایشی در حین حرکت در نمونه اولیه می تواند موانع UX را آشکار کند. هنگامی که چند یادداشت داشتید، به مرحله دو برگردید و آن را تکرار کنید تا کامل شود.
اگرچه اینها مراحل واقعی برای ایجاد یک طرحبندی وبسایت هستند، اما وقتی تازه شروع به کار میکنید، دانستن اینکه چه چیزی یک طرحبندی را مؤثر میکند یا نه، دشوار است. در بخش بعدی، به تکنیک های خاصی می پردازیم که می توانید برای هدایت تصمیمات طراحی خود از آنها استفاده کنید.
تکنیک های کلیدی برای یک چیدمان موثر وب سایت
–
طراحی صفحهآرایی وبسایت یک روش دهها ساله است، به این معنی که تعدادی از قراردادها و اصول طراحی در طول سالها ایجاد شدهاند تا طراحان را در کار خود راهنمایی کنند. موارد زیر برخی از مفیدترین این تکنیک ها هستند:
سلسله مراتب بصری
سلسلهمراتب بصری روشی برای استایل دادن به شش عنصر طراحی برای افزایش کنتراست به منظور تأکید بر بخشهای منتخب محتوا بالاتر از دیگران است. برای این منظور، مهمترین بخشهای چیدمان آنهایی هستند که کاربر باید فوراً بسته به هدف صفحه شناسایی کند. اینها معمولاً شامل سرفصلها، پیشنهادهای ارزشی، فراخوانها برای اقدام و ابزارهای کاربر مانند ناوبری است.
سلسله مراتب بصری می تواند خود را به روش های مختلفی نشان دهد، مانند انتخاب فونت (اندازه، وزن و حتی جفت فونت های مختلف)، تراز کردن عناصر مهم در بالای صفحه یا استفاده از رنگ های مکمل برای برجسته کردن عناصر.
الگوهای خواندن
الگوهای خواندن رایجترین روشهایی را که کاربران صفحات را اسکن میکنند و در خطوط جهت نشان میدهند توصیف میکنند (بردارها، برای خردهگیران ریاضی آنجا). از آنجایی که تحقیقات نشان می دهد که ۷۹٪ از بازدیدکنندگان سایت فقط صفحه را مرور می کنند، ضروری است که اسکن تا حد امکان آسان شود. طراحی چیدمان با الگوی خواندن خاص یکی از راه های موثر برای انجام این کار است.
گنجاندن الگوهای خواندن در چیدمان شامل قرار دادن عناصر استراتژیک در امتداد خطوط دید بیننده است. متداول ترین الگوهایی که باید در نظر گرفته شوند، الگوی Z (بردار زیگزاگی؛ مفید برای طرحبندیهای سنگین تصویر) و الگوی F (بردار خط به خط؛ مفید برای طرحبندیهای سنگین متن هستند).
بالا یا زیر چین
در طراحی وب، “فولد” خطی است که در آن یک صفحه وب به دلیل محدودیت های اندازه صفحه نمایش قطع می شود. محتوایی که هنگام بارگیری صفحه قابل مشاهده است، گفته میشود «در بالای صفحه» و محتوایی که از کاربران میخواهد برای آشکار کردن آن به پایین اسکرول کنند، «زیر تا» گفته میشود.
وقتی صحبت از طراحی طرحبندی وبسایت میشود، مهمترین و/یا محتوای متقاعدکننده (مانند ارزش پیشنهادی و CTA) باید با خیال راحت در بالای صفحه قرار گیرد تا کاربران مجبور نباشند به دنبال آن باشند. این فضا برای اکثر ابعاد صفحه نمایش ۱۰۰۰ x 600 پیکسل برآورد شده است. با توجه به آنچه گفته شد، طراحان همچنین می توانند از تاشو برای قطع کردن گرافیک های جذاب و کپی کردن استفاده کنند تا کاربران را تشویق کنند که به پایین پیمایش کنند و به تعامل خود با صفحه وب ادامه دهند.
سیستم های شبکه ای
سیستم شبکه ای طرحی است که بر اساس اندازه گیری ها و دستورالعمل های صلب است. شبکه از ستون ها (فضاهای تعیین شده برای قرار دادن محتوا) و ناودان ها (فضاهای خالی بین ستون ها) تشکیل شده است.
اگرچه سیستمهای گرید از مجلات و روزنامههای چاپی سرچشمه میگیرند، اما در طراحی وب به دلیل نظم ریاضی و ثباتی که در مواجهه با محتوای با حجم بالا ایجاد میکنند، همه جا حاضر هستند. در عین حال، طراحان همچنین باید مراقب یکنواختی در طراحی شبکه باشند و باید از این محدودیت ها برای ایجاد ترتیبات غیرمنتظره در شبکه استفاده کنند.
فضای سفید
فضای سفید، که گاهی اوقات فضای منفی نامیده می شود، به سادگی منطقه یک طرح بدون محتوای است – یعنی فضای خالی. اگرچه نادیده گرفتن آن آسان و اغلب وسوسه انگیز است که با محتوا پر شود، فضای سفید می تواند مهم ترین دارایی در طرح بندی وب سایت باشد.
روشی را در نظر بگیرید که یک خط متن در یک صفحه خالی در غیر این صورت چشم شما را بسیار موثرتر از صفحه ای پر از محتوا جلب می کند. فضای سفید زیاد باعث ایجاد تاکید می شود در حالی که باعث می شود کل ترکیب برای خواندن احساس دلهره آور کمتری داشته باشد. برخلاف صفحات چاپی، محدودیتی برای طولانی بودن صفحه وب وجود ندارد و به طراحان آزادی بسیار بیشتری برای استراتژیک بودن و سخاوتمندانه بودن فضای سفید می دهد.
انواع رایج طرحبندی وبسایت
–
طرح بندی وب سایت به ندرت از ابتدا ایجاد می شود. در واقع، اغلب توصیه می شود که نیستند. اکثر وبسایتهای مدرن بر اساس طرحهای چیدمان رایج هستند که بارها و بارها با تغییرات کوچک در سراسر اینترنت استفاده میشوند.
اگرچه درجاتی از اصالت در هر طراحی مهم است، وب سایت ها باید فوراً درک شوند و مورد استفاده قرار گیرند. بنابراین وقتی کاربران در طول سال ها به انواع خاصی از طرح های چیدمان عادت می کنند، منطقی است که طراحان به آنها پایبند باشند. به یاد داشته باشید که در پایان روز، یک چیدمان باید کاربردی باشد، و هر چه کاربران زمان کمتری برای یادگیری یک طرح بندی جدید صرف کنند، زمان بیشتری را به استفاده واقعی از سایت اختصاص می دهند. گذشته از این، در اینجا برخی از رایج ترین طرح بندی های وب سایت آورده شده است:
طرح بندی تک ستونی
طرح بندی تک ستونی، طرحی است که در آن محتوا به ترتیب در یک ستون، اغلب در یک تراز وسط قرار می گیرد.
بسیاری از طرحبندیهای صفحات وب از اینجا شروع میشوند، با توجه به اینکه طراحی اول از طریق موبایل یک رویکرد توصیه شده طولانی مدت است و وبسایتهای تلفن همراه به دلیل محدودیتهای اندازه، اغلب در یک ستون مرتب میشوند. این طرحبندی برای صفحات فرود یا محتوای مبتنی بر فید، مانند رسانههای اجتماعی و سایتهای وبلاگ بسیار مفید است، زیرا میزان عناصر صفحه را کاهش میدهد و پیمایش را تشویق میکند.
طرح بندی دو ستونی
طرح بندی دو ستونی، گاهی اوقات به صورت تقسیم صفحه، محتوا را در کنار هم نمایش می دهد.
برای برجسته کردن دوگانگی بین دو عنصر (مخاطبان مختلف در وبسایتهای لباس، سبک خدمات قبل و بعد، یا گزینههای دوگانه برای قیمتگذاری، برای مثال) مفید است. همچنین برای متعادل کردن گرافیک با کپی مفید است در حالی که به طور نامحسوس از خواندن الگوی Z پشتیبانی می کند.
طرح چند ستونی
چیدمان چند ستونی اغلب طرح روزنامه یا مجله نامیده می شود. محتوای سنگین سایت را در همان صفحه جای می دهد.
استفاده از یک شبکه برای حفظ نظم و سلسله مراتب رایج است و فضای ستونی وسیع تری را به عناصر مهم تری مانند محتوای بدنه می دهد در حالی که عناصر کمتر مهم مانند منوی پیمایش، نوار کناری یا تبلیغات بنری فضای متناسب کمتری دریافت می کنند. این برای صفحات اصلی شرکت، سایتهای سنگین تصویری یا ویدیویی، نشریات آنلاین، داشبورد کاربران و وبسایتهای خرید مفید است – یعنی وبسایتهایی با محتوا و دستهبندیهای زیاد که کاربران را به آنها هدایت کند.
چیدمان نامتقارن
چیدمان نامتقارن جایی است که عناصر در مقیاس و مجاورت نابرابر چیده می شوند – به عبارت ساده تر، نه متقارن. اما با وجود اینکه نقطه مقابل یک سیستم مبتنی بر شبکه است، عدم تقارن به معنای هرج و مرج نیست
تعادل در هر طراحی ضروری است و یک چیدمان نامتقارن به سادگی به روش های غیرمنتظره ای مانند جفت کردن یک تصویر در مقیاس بزرگ در یک طرف با بسیاری از عناصر کوچکتر در طرف دیگر به این امر دست می یابد. برای تأکید بیشتر با اغراق برخی عناصر (از طریق اندازه تحت اللفظی، رنگ آمیزی یا قرار دادن) بر سایر عناصر مفید است. همچنین می تواند از الگوهای خواندن سفارشی پشتیبانی کند (برخلاف موارد رایج که قبلا ذکر شد).
برندهایی که می توانند در رویکرد طراحی خود نامتعارف باشند، این سبک چیدمان را ایده آل می یابند – یعنی وب سایت هایی که به هنر می پردازند، مخاطبان ماجراجویی دارند یا می خواهند محصولی نوآورانه یا مخرب را برجسته کنند.
طرحبندی وبسایت همه چیدمان شده است
–
طراحی چیدمان وب سایت عالی نه تنها وب سایت شما را از نظر بصری جذاب می کند، بلکه آن را بصری می کند. این اولین گام به سمت برداشت اول برنده از کاربران است، و آنها را تشویق می کند که به اطراف بمانند و تمام محتوایی را که سایت شما ارائه می دهد مشاهده کنند.
در حالی که این اصول طراحی صفحهآرایی وبسایت میتواند مکانی برای شروع به شما بدهد، شما باید تلاش کنید تا تجربیات استثنایی را برای بازدیدکنندگان سایت خود ارائه دهید. و بهترین راه برای به دست آوردن یک طراحی صفحهآرایی وبسایت پیشرفته این است که مطمئن شوید با یک طراح حرفهای کار میکنید.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.