اصول طراحی وب

1) تــعادل بصــری

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

به طور کلی، طرح‌های متعادل احساس منسجم و هماهنگی دارند، در حالی که طرح‌های نامتعادل می‌توانند احساس ناهنجاری یا ناپایداری داشته باشند.

چند راه مختلف برای دستیابی به تعادل بصری در طراحی وب وجود دارد که به ترتیب به آنها میپردازیم :

• متداول‌ترین حالت تعادل متقارن است که شامل استفاده از عناصر تصویر آینه‌ای یکسان در دو طرف صفحه است.
• گزینه دیگر تعادل نامتقارن است، با استفاده از عناصر با اندازه یا شکل متفاوت برای ایجاد حس هماهنگی بصری. در هر دو مورد، وزن بصری در هر دو طرف برابر است، با این تفاوت که ترتیب عناصر در طرح های نامتقارن متفاوت است.
• تعادل شعاعی از عناصر تکراری استفاده می کند که از یک نقطه مرکزی به بیرون تابش می کنند. نقطه کانونی بیشترین توجه را به خود جلب می کند و معمولاً برای CTA های با ارزش بالا رزرو می شود.معمولاً طراحان، تعادل شعاعی را در مرکز تنظیم می‌کنند، اما شما می‌توانید آن را در هر کجا که مناسب می‌دانید برقرار کنید. به عنوان مثال، OptinMonster نقطه کانونی را در سمت راست قرار داد تا هوشمندانه پیشنهاد دهد که کدام طرح قیمت گذاری بیشترین هزینه را برای شما ارائه می دهد.
• تعادل کریستالوگرافی احتمالاً کم استفاده ترین نوع است زیرا سازماندهی آن دشوار است.
• از آنجایی که این نوع تعادل هیچ قانون خاصی ندارد، به راحتی می توان در آن زیاده روی کرد و باعث ایجاد هرج و مرج وب سایت و به هم ریختگی به نظر برسد. اما دوباره، اگر درست انجام شود - درست مانند طرح بندی Pinterest - می تواند مشتریان شما را تحت تاثیر قرار دهد.

2) ثبـــات

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

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

این مهم است زیرا 38٪ از مردم هنگام دیدن یک سایت برای اولین بار به طرح صفحه و پیوندهای ناوبری وب سایت نگاه می کنند و اگر محتوا و طرح بندی غیرمنطقی باشد، 38٪ درگیر نمی شوند.

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

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

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

برای پایدار نگه داشتن طرح، سعی کنید :

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

3) الگوی F یا Z

وقتی صحبت از طراحی وب می شود، یعنی صحبت از سبک های فکری متفاوت !

محبوب ترین روش ها، الگوی F و الگوی Z هستند. ایده پشت این الگوها کمک به بازدیدکنندگان برای خواندن و بررسی دقیق تر صفحه ی وب است؛

کاربران تقریباً 28 درصد از متن یک صفحه را می خوانند، بنابراین بهتر است با ارزش ترین اطلاعات را درست در مقابل آنها قرار دهید. الگوی F اغلب برای صفحات با متن زیاد استفاده می شود، زیرا به خواننده کمک می کند تا به سرعت نکات اصلی را پیدا کند. مطالعه‌ای که رفتار خواندن کاربران را ردیابی کرده نشان داد که آن‌ها عادات خواندن ثابتی در سایت‌های مختلف دارند که همان الگوی F هست.

الگوی F در طراحی وب از این رفتار خواندن کاربران متولد شد.

دقت داشته باشید که در نوشتن محتوا موارد زیر را در نظر داشته باشید :

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

4) فضای منفی

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

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

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

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

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

5) ناوبری ساده و منطقی صفحه

پیمایش در یک وب سایت باید یک فرآیند ساده و منطقی برای کاربران باشد. همه صفحات در وب سایت باید به راحتی پیدا شوند و مسیر یک صفحه به صفحه دیگر باید واضح باشد تا تجربه کاربری خوبی ارائه شود.

طراحی وب سایت، 75% از اعتبار وب سایت را به خود اختصاص می دهد و اگر شما UX خوبی ارائه نکنید، 89% از مشتریان احتمالا به یک رقیب روی می آورند.

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

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

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

با استفاده از امکان Breadcrumbs میتوانید موقعیت کاربر را در وب سایت نشان دهید.

برای نمونه اگر کاربری در صفحه « درباره ی ما » وب‌سایت شما باشد، مسیر سایت یا همان Breadcrumbs به این صورت نمایش داده شود :

« صفحه اصلی > درباره ی ما »، که در این صورت کاربر میتواند بدون سردرگمی به صفحه اصلی وبسایت بازگردد.

6) رنگ های مکمل

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

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

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

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

به عبارت ساده، آنها طراحی را پاپ می کنند!

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

7) سازگاری با موبایل

یکی از مهمترین اصول طراحی وب، اطمینان از سازگاری سایت شما با موبایل است، زیرا 72% از مصرف کنندگان خواهان سایت های سازگار با موبایل هستند.

74% از بازدیدکنندگان بیشتر به وب‌سایت‌های سازگار با موبایل باز می‌گردند، در حالی که 61% احتمالا اگر سایتی اینطور نباشد، آن را ترک می‌کنند.

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

چند کار وجود دارد که می توانید برای اطمینان از سازگاری سایت خود برای موبایل انجام دهید :

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

8) دکمه های بهینه شده و فراخوانی برای اقدام

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

هنگام طراحی دکمه‌ها و فراخوان‌ها برای اقدام، چندین اصل وجود دارد که باید در نظر داشته باشید :

• آن را ساده نگه دارید، دکمه باید به راحتی قابل درک و کلیک باشد، از رنگ و کنتراست برای برجسته کردن دکمه استفاده کنید.
• از فضای خالی برای ایجاد حس سلسله مراتب و تاکید بر دکمه استفاده کنید.
• از اندازه و موقعیت برای جلب توجه به دکمه استفاده کنید، نرخ تبدیل برای وب‌سایت‌هایی که به خوبی طراحی شده‌اند با دکمه‌های دقیق و CTA می‌تواند 200 درصد بیشتر از وب‌سایت‌هایی باشد که طراحی ضعیفی دارند.

9) قـــانون فیت

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

همچنین ایجاد یک تجربه کاربری موثر است که به بازدیدکنندگان شما کمک می کند تا آنچه را که به دنبال آن هستند سریع و آسان پیدا کنند.

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

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

برای نمونه، اگر دکمه‌ای دارید که می‌خواهید افراد روی آن کلیک کنند، آن را در مکانی به راحتی قابل مشاهده قرار دهید نه اینکه آن را در گوشه‌ای قرار دهید.

خدمات من در حوزه ی وب

طراحی و برنامه نویسی :

• پرتال
• فروشگاه اینترنتی
• وب سایت شخصی
• وب سایت شرکتی / سازمانی