20 نکته کلیدی در طراحی سایت
- نوشته شده در سه شنبه 3 خرداد 1401 ساعت 17:15
- | ارسال نظر
طراحی وب یک فرآیند کاملا فردی است. به منظور ایجاد ترکیبات واقعا منحصر به فرد و تاثیرگذار، طراحان باید ایده های از پیش تعیین شده خود را در مورد اینکه یک وب سایت چگونه باید باشد، کنار بگذارند. در عوض، آنها باید اجازه دهند ارزش‌های برند، مخاطبان و نقاط تمایز، «شمال واقعی» آنها باشد و آنها را در فرآیند طراحی راهنمایی کند.
اما در حالی که طراحی تماماً در مورد شکستن "قوانین" و ایجاد قوانین شماست، چند اصل طراحی وب بی خطر وجود دارد که همه طراحان باید در نظر داشته باشند. این دستورالعمل‌های آزموده‌شده برای ایجاد وب‌سایت‌های شیک و کاربردی که مخاطبان شما را درگیر می‌کنند، ضروری هستند. برای اطلاع از خلاقیت های بعدی خود، 20 اصل اساسی طراحی وب را بخوانید.
01. از فونت های قابل خواندن و وب پسند استفاده کنید
نقش تایپوگرافی در طراحی وب را نمی توان نادیده گرفت. استفاده از فونت های مناسب شخصیت برند شما را نشان می دهد و بلافاصله توجه مخاطبان را به خود جلب می کند. با این حال، این فقط به ظاهر خوب نیست. حروفی که در طراحی وب خود استفاده می کنید نیز باید کاربردی و خوانا باشند. به هر حال، اگر کاربر مجبور باشد فقط برای دیدن متن شما چشم‌های خود را نگاه کند، احتمالاً برای ارتباط با پیام شما دچار مشکل می‌شود. Arial، Helvetica، Times New Roman و Courier New همگی نمونه هایی از فونت های وب دوست هستند. این بدان معنی است که آنها خوانایی را در هر اندازه ای حفظ می کنند و در تلفن همراه و دسکتاپ به خوبی کار می کنند.
تایپوگرافی در طراحی این وب سایت برای نویسنده و طراح مت استیل نقش اصلی را دارد. او از یک فونت سریف همه کاره استفاده کرده است که در صورت استفاده کوچک و سبک، یا بزرگ و پررنگ، چشم نواز می ماند.
جهت آگاهی از هزینه طراحی سایت شخصی کلیک کنید.
آیا می خواهید به تایپوگرافی خود اجازه دهید در پروژه بعدی طراحی وب خود صحبت کند؟ الگوی تبلیغ وب سایت فروش اشکال هندسی قرمز Canva نقطه شروع عالی برای سربرگ وب سایت متمرکز بر متن است.
02. از الگوی "" F استفاده کنید
انسان ها مخلوقات عادت هستند - و نحوه مصرف محتوا نیز از این قاعده مستثنی نیست. یک مطالعه گروه نیلسن نورمن در مورد ردیابی چشم نشان داد که وقتی اطلاعات یک وب سایت را اسکن می کنیم، اکثر ما این کار را به شکل F انجام می دهیم. این بدان معناست که ابتدا سرفصل های مهم را در بالای صفحه می خوانیم، سپس سمت چپ صفحه را در هر عدد، نقطه گلوله یا نوار کناری اسکن می کنیم، سپس دوباره در سراسر صفحه در هر متن پررنگ یا زیر عنوان. در طراحی وب، استفاده از الگوی "F" شامل تقلید از مسیر طبیعی چشم است تا در جریان بصری اختلال ایجاد نشود. این به ویژه در صفحه فرود و فروش، جایی که تبدیل هدف نهایی است، بسیار مهم است.
شما می توانید این را در عمل در صفحه اصلی BigCommerce مشاهده کنید. آنها به طرز ماهرانه ای یک طرح F شکل ایجاد کرده اند تا کاربر را وادار به انجام عمل مورد نظر کند - که در این مورد، تور محصول است. چشم‌ها مستقیماً به سربرگ می‌روند (به کمک تایپوگرافی پررنگ و زیرخط رنگارنگ) سپس به نموداری می‌روند که نشان می‌دهد محصول آنها چگونه کار می‌کند، سپس به اطلاعات تکمیلی و فراخوان برای اقدام بازمی‌گردند.
03. یا الگوی Z
در حالی که الگوی "" F یک الگوی رایج اسکن چشم است، تنها این الگو نیست. طرح Z یکی دیگر از اصول مهم طراحی است. این زمانی است که چشم از چپ به سمت راست بالا اسکن می کند و یک خط افقی خیالی را تشکیل می دهد. آنها، به سمت چپ صفحه پایین می رود و یک خط مورب خیالی ایجاد می کند. در نهایت، دوباره به سمت راست حرکت می کند و یک خط افقی دوم را تشکیل می دهد.
بنابراین، چه زمانی از طرح "" Z به جای " " F استفاده می کنید؟ در حالی که طرح «Z» برای صفحات فرود بهترین عملکرد را دارد، الگوی Z عموماً برای صفحاتی با اطلاعات بسیار کم مناسب‌تر است، جایی که نکته اصلی دعوت به اقدام است.
به احتمال زیاد، قبلاً این الگو را در عمل دیده اید - زیرا در صفحه ورود به سیستم فیس بوک استفاده می شود! چشم به طور طبیعی مستقیماً به سمت لوگو می رود، اما الگوی Z کاربران را از طریق دو فراخوان برای اقدام هدایت می کند - ورود به سیستم یا پیوستن.
04. از فضای منفی استفاده کنید
گاهی اوقات، شما می توانید منفی را به مثبت تبدیل کنید! این قطعا در مورد استفاده از فضای منفی در طراحی وب سایت شما صادق است. همچنین به عنوان فضای خالی یا فضای سفید شناخته می شود، این قسمت های خالی بین عناصر بصری در طراحی شما (به عنوان مثال، عکس ها، متن و نمادها) است.
این اصل به اندازه خود هنر وجود داشته است، اما نقش مهمی در طراحی وب دارد. وب سایت های بیش از حد شلوغ و پیچیده تمایل دارند کاربر شما را تحت الشعاع قرار دهند و از انجام کاری جلوگیری کنند - که دقیقا برعکس آنچه شما می خواهید است! در همین حال، استفاده از فضای منفی توجه آنها را به مهم ترین محتوا جلب می کند، خوانایی متن را افزایش می دهد و تجربه کاربری یکپارچه ایجاد می کند.
شما می توانید ببینید که در اینجا کار می کند. تمرکز اپل همیشه بر روی محصولات خود بوده است، زیرا آنها برای فروش به مخاطبان خود نیازی به تکیه بر زنگ و سوت ندارند. این در استفاده آنها از فضای منفی در این چیدمان مینیمالیستی منعکس شده است، جایی که آنها محصول جدید خود - iPhone X - را در کانون توجه قرار می دهند.
آیا می خواهید این رویکرد "کمتر-بیشتر" را در طراحی وب خود بگنجانید؟ سعی کنید از یک قالب Canva مانند وب سایت رویدادهای عروسی گل صورتی استفاده کنید، که قبلاً فضای منفی زیادی در آن تعبیه شده است.
05. طراحی خود را ثابت نگه دارید
شما قبلاً می دانید که ثبات در طراحی وب سایت کلیدی است. اما مهم است که توجه داشته باشید که این به معنای چیزی بیشتر از یکنواخت نگه داشتن فونت ها، رنگ ها و نمادهای شما در برند شماست. همچنین به این معنی است که فاصله را در چیدمان‌های خود ثابت نگه دارید. این به وب‌سایت شما کمک می‌کند تا حسی صیقلی و حرفه‌ای داشته باشید که باعث افزایش اعتبار برند می‌شود.
این امر در طراحی وب سایت شرکت کتابخانه الکترونیکی Bookworm مشهود است. در حالی که آنها از طیفی از اندازه های مختلف فونت و ابعاد مختلف تصویر استفاده کرده اند، فاصله بین عناصر بصری مختلف ثابت می ماند. این به ایجاد حس نظم و هماهنگی در یک ترکیب شلوغ کمک می کند.
ویژگی‌های تراز داخلی Canva باعث می‌شود مطمئن شوید که فاصله متن و پاراگراف شما در طراحی شما یکسان است.
06. پیمایش ساده و منطقی صفحه
یک وب سایت بدون ناوبری واضح مانند یک پیچ و خم بدون نقشه است. مطالعه وب سایت شما را به طور غیر ضروری برای بازدیدکنندگان دشوار و گیج کننده می کند. از سوی دیگر، ناوبری وب سایت با طراحی خوب، تجربه کاربری ساده و آرامی را برای کاربر به ارمغان می آورد. این می تواند اشکال مختلفی داشته باشد - خواه یک منوی کشویی، نوار کناری یا ناوبری چسبنده باشد. نکته کلیدی این است که مکان یابی آن آسان است، در همه دستگاه ها به خوبی کار می کند و با گزینه های مختلف بیش از حد بارگذاری نمی شود.
در این مثال از شرکت طراحی وب Equus، ناوبری ساده و در عین حال موثر است. آنها نوار منوی تک رنگ با فونت تمیز و sans-serif را انتخاب کرده اند که در مقابل هدر رنگارنگ متمایز است. آنها همچنین گزینه های منوی خود را تنها یک کلمه نگه داشته اند، که به ایجاد یکپارچگی و اطمینان از اینکه فضای زیادی را اشغال نمی کند، کمک می کند.
ادامه دارد...