20 اصل طراحی وب که باید رعایت کنید

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

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

نکته: می‌توانید با استفاده از Canva Website Builder، اصول مختلف طراحی وب ذکر شده در این مقاله را برای وب‌سایت جدید خود اعمال کنید .(در یک برگه یا پنجره جدید باز می شود).

نقش تایپوگرافی در طراحی وب را نمی توان نادیده گرفت. استفاده از فونت های مناسب شخصیت برند شما را نشان می دهد و بلافاصله توجه مخاطبان را به خود جلب می کند. با این حال، این فقط به ظاهر خوب نیست. حروفی که در طراحی وب خود استفاده می کنید نیز باید کاربردی و خوانا باشند. از این گذشته، اگر کاربر مجبور است فقط برای دیدن متن شما چشم‌های خود را نگاه کند، احتمالاً برای ارتباط با پیام شما دچار مشکل می‌شود. Arial، Helvetica، Times New Roman و Courier New همگی نمونه هایی از فونت های وب دوستانه هستند .(در یک برگه یا پنجره جدید باز می شود). این بدان معنی است که آنها خوانایی را در هر اندازه ای حفظ می کنند و در تلفن همراه و دسکتاپ به خوبی کار می کنند.

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

آیا می خواهید به تایپوگرافی خود اجازه دهید در پروژه طراحی وب بعدی شما صحبت کند؟ آگهی فروش وب سایت اشکال هندسی قرمز Canva's ⁠(در یک برگه یا پنجره جدید باز می شود)الگو نقطه شروع عالی برای یک هدر وب سایت متمرکز بر متن است.

انسان ها مخلوقات عادت هستند - و نحوه مصرف محتوا نیز از این قاعده مستثنی نیست. یک گروه نیلسن نورمن(در یک برگه یا پنجره جدید باز می شود)مطالعه در مورد ردیابی چشم نشان داد که وقتی اطلاعات یک وب سایت را اسکن می کنیم، اکثر ما این کار را با الگوی F شکل انجام می دهیم. این بدان معناست که ابتدا عناوین مهم را در بالای صفحه می خوانیم، سپس سمت چپ صفحه را در هر عدد، نقطه گلوله یا نوار کناری اسکن می کنیم، سپس دوباره در سراسر صفحه در هر متن پررنگ یا عنوان فرعی. در طراحی وب، استفاده از الگوی "F" شامل تقلید از مسیر طبیعی چشم است تا در جریان بصری اختلال ایجاد نشود. این به ویژه در صفحه فرود و فروش، که در آن تبدیل هدف نهایی است، بسیار مهم است.

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

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

بنابراین، چه زمانی از طرح "Z" به جای "F" استفاده می کنید؟ در حالی که طرح "Z" برای صفحات فرود بهترین عملکرد را دارد، الگوی Z به طور کلی برای صفحاتی با اطلاعات بسیار کم مناسب تر است، جایی که نکته اصلی دعوت به اقدام است.

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

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

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

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

آیا می خواهید این رویکرد "کمتر-بیشتر" را در طراحی وب خود بگنجانید؟ سعی کنید از یک قالب Canva مانند وب سایت رویدادهای عروسی گل صورتی استفاده کنید(در یک برگه یا پنجره جدید باز می شود)، که قبلاً فضای منفی زیادی در آن تعبیه شده است.

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

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

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

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

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

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

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

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

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

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

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