10 قانون طراحی وب که می توانید آنها را زیر پا بگذارید

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

برخی از این قوانین صرفاً به این دلیل ایجاد شده اند که سازندگان وب سایت از اصول خاصی بدون توجه به کاربران خود سوء استفاده کرده اند.

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

در این مقاله، 10 قانون را ارائه می دهیم که اگر مطابق با نیازهای طراحی شما باشد، می توانید آنها را زیر پا بگذارید.

 

قانون شماره 1: نوار اسکرول افقی نمایش داده نشود

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

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

بنک

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

گورو کفش

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

استفان تارتلین

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

گرافیک درمانی

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

راه افقی

راه افقی ویترینی از وب‌سایت‌هایی است که از پیمایش افقی استفاده می‌کنند. گرافیک‌های گرانگی زیبا هستند و این سایت تا آنجا که گالری‌های CSS بی‌نظیر است.

 

قانون شماره 2: استفاده از حداقل تعداد چهره قلم

فونت‌های زیاد معمولاً با یکدیگر تضاد دارند و بیننده را تحت تأثیر قرار می‌دهند. هر فونت یک شخصیت دارد و شخصیت های زیاد می توانند اختلال ایجاد کنند.

برای استفاده مؤثر از بیش از چند فونت، یک طرح باید بسیار متن محور باشد و بقیه طراحی باید نسبتاً بی صدا باشد. در اینجا چند نمونه از سایت هایی وجود دارد که از این حس درگیری و بی نظمی برای درگیر کردن کاربر استفاده می کنند.

پیوندهای LA

Links LA از فونت‌های زیادی در یک طرح‌بندی غیرخطی برای ایجاد حس استفاده می‌کند. انرژی. خواندن سریع صفحه دشوار است اما کاربر را به خود جذب می کند. همچنین شایان ذکر است که هیچ یک از فونت ها بیش از حد تزئینی نیستند. هر کلمه خوانا است و طرح را واضح و تمیز نگه می دارد.

Geo Elements Design Studio

استفاده از انواع فونت‌ها معمولاً حس انرژی و آشفتگی را منتقل می‌کند، اما Geo Elements Design Studio بسیار باز و تمیز است. به هر فونت فضای مخصوص به خود داده می شود تا بیننده آن را با فونت دیگری مرتبط نکند. تصویر آسمان در پس‌زمینه به تقویت حس باز بودن کمک می‌کند.

ریچارد استلماخ

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

ساتسو

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

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

 

قانون شماره 3: از رنگ های زیاد استفاده نکنید

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

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

مت مولنوگ

طراحی زیبای رنگی مت مولنوگ شبیه نقاشی آبرنگ به نظر می رسد (سایت از این مقاله به روز شده است نوشته شده). همه رنگ‌های پس‌زمینه توجه هر کسی را به خود جلب می‌کنند.

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

Travic Isaacs

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

جیمز دی آنجلیس

وب‌سایت

جیمز دی آنجلیس نشان می‌دهد که متن می‌تواند رنگارنگ باشد بدون اینکه به‌عنوان مبتدی شناخته شود. -پسندیدن. طراحی بسیار کم است، و شعار قطعاً در مرکز قرار دارد.

 

قانون شماره 4: هدف سایت خود را آشکار کنید

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

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

استفاده از این تکنیک در طراحی وب می تواند زمان ماندن کاربران در سایت شما را تا حد زیادی افزایش دهد.

Cetrotrees

امروزه در اکثر نمونه کارها، فریلنسر یا شرکت معمولاً خود را معرفی می کند و کار خود را توضیح می دهد. Cerotreees در عوض تعدادی پیوند با برچسب مبهم در سمت چپ و نمونه‌هایی از کار خود را در سمت راست قرار می‌دهد، اما هیچ چیز ایده یا شخص پشت آن را توضیح نمی دهد.

هوای اسرارآمیز پیرامون سایت، کاربر را به ماندن ترغیب می کند.

آخرین میکس تیپ

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

پیتر پیرسون

استفاده از صفحه نمایش اسپلش روش خوبی برای کند کردن روند تفکر کاربر و ترغیب آنها به کاوش عمیق تر است. هدف صفحه splash معمولاً توضیح سریع سایت با عکس یا متن کوتاه است.

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

حرکت اسکرول جانبی و خطوط متحرکی که کاربر را دنبال می‌کنند واقعاً مؤثر هستند.

Piepmatzel

یک راه عالی برای دور زدن مانع زبان این است که از هیچ کلمه ای استفاده نکنید. Piepmatzel یک گالری CSS است و افرادی که قبلاً یک گالری CSS را دیده‌اند احتمالاً آن را تشخیص خواهند داد. فوراً به عنوان یکی.

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

 

قانون شماره 5: پیمایش باید آسان باشد

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

آلوین تانگ

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

این عدم قطعیت باید آن‌ها را وادار کند که کمی به این موضوع بپردازند. حرکت ماوس بر روی یک کلمه نشان می دهد که در واقع یک پیوند است، و با کلیک بر روی آن، یک عکس زیبا بارگیری می شود. این عکس کاربران را برای ادامه مرور ترغیب می کند.

برای دیدن عکس‌های بیشتر، کاربران باید روی دکمه «بازگشت» در مرورگر خود کلیک کنند (کاری که اکثر مردم آن را درک می‌کنند) و سپس روی پیوند دیگری کلیک کنند. در طراحی هیچ نگهدارنده ای وجود ندارد و بسیار خوب کار می کند. این یک طراحی معمولی “زیبا” نیست، اما دقیقاً همان چیزی را که نیاز دارد ارائه می دهد.

کاسولو

کاسولو پیمایش خیلی سخت نیست، اما کاربر معمولی ممکن است نداند دقیقاً پس از ورود به سایت چه کاری انجام دهد. اما پس از اولین کلیک، همه چیز آشکار می شود.

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

مارسیو کوگان

سایت

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

Ceranco

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

در حالی که وب سایت Ceranco دقیقاً یک تیراندازی سه بعدی نیست، اما می تواند به راحتی با نوعی بازی کامپیوتری مستقل اشتباه گرفته شود. سایت هایی مانند این در جذب کاربران عالی هستند. در حالی که زمان بارگذاری طولانی و بهینه سازی ضعیف برای موتورهای جستجو این را برای اکثر پروژه ها ایده آل نمی کند، قطعاً ارزش یک فکر مجدد را دارد.

 

قانون شماره 6: استفاده از رنگ های مختلف برای متن و پس زمینه

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

Linksys

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

براد کلبو

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

Powerset

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

Powerset برای ایجاد یک افکت سه‌بعدی از یک سبک چاپی برای فونت خود استفاده می‌کند. به طور موثر متن را از پس زمینه جدا می کند.

هنرمند در طراحی

Artist In Design نه تنها دارای متن سبز رنگ در پس زمینه سبز است و متن زرد/بژ روی پس‌زمینه زرد اما متنی مستقیماً در بالای عکس دارد.

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

هوراسیو بلا

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

 

قانون شماره 7: انیمیشن را در مسیر محتوای خود قرار ندهید

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

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

 

قانون شماره 8: به قلم‌های ایمن وب پایبند باشید

اگرچه تکنیک‌های جایگزینی صورت فونت هنوز جوان هستند، اما در حال حاضر سروصدای زیادی ایجاد می‌کنند. sIFR اولین بود و اخیراً Cufón و Typefasce.js ظاهر شده است.

Diseñorama

در وب‌سایت Diseñorama، متن قرمز “Recientente” قابل انتخاب است. یک نقطه ضعف این است که اگر سایت فوراً بارگیری نشود، کاربر فونت ساده اصلی را به طور خلاصه می بیند.

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

Cactuslab

Cactuslab همچنین از sIFR برای سرفصل های فرعی آبی (مانند “Winter Work”). اگرچه sIFR پیچیده‌ترین تکنیک جایگزینی فونت است، متن را می‌توان کپی و جایگذاری کرد که به آن برتری بزرگی نسبت به دو تکنیک دیگر می‌دهد.

 

قانون شماره 9: صفحه پرش یا فرود نداشته باشید

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

Gloss Postproduction

هدف نمونه نمونه کارها که در صفحه splash وب‌سایت Gloss Postproduction برای برانگیختن واکنش احساسی کاربر است.

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

عیسی لندن

وقتی یک سایت به طور کامل در Flash انجام می شود، نوار بارگذاری می تواند به عنوان یک صفحه splash عمل کند. وقتی کاربر نوار بارگیری را می‌بیند، صفحه را می‌بندد و به جای دیگری می‌رود یا به برگه دیگری تغییر می‌کند و در حالی که منتظر است در جای دیگری مرور می‌کند.

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

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

 

قانون شماره 10: از جداول استفاده نکنید

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

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

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

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

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

 

قوانین را بشکنید!

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

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

به طور انحصاری برای WDD bt Eli Penner نوشته شده است. او وب سایت خود را در SleepyHero.com

اداره می کند.

آیا قوانینی را در طراحی وب خود زیر پا می گذارید؟ چرا و چرا نه؟ لطفا نظرات خود را با ما در میان بگذارید…