طراحی وب یک فرآیند کاملا فردی است. به منظور ایجاد ترکیبات واقعا منحصر به فرد و تاثیرگذار، طراحان باید ایده های از پیش تعیین شده خود را در مورد اینکه یک وب سایت چگونه باید باشد، کنار بگذارند. در عوض، آنها باید اجازه دهند ارزش‌های برند، مخاطبان و نقطه تمایزشان «شمال واقعی» آنها باشد و آنها را در فرآیند طراحی راهنمایی کند.
............................
در حالی که طراحی تماماً در مورد شکستن “قوانین” و ایجاد قوانین شماست، چند اصل طراحی وب بی خطر وجود دارد که همه طراحان باید در نظر داشته باشند. این دستورالعمل‌های آزمایش‌شده برای ایجاد وب‌سایت‌های شیک و کاربردی که مخاطبان شما را درگیر می‌کنند، ضروری هستند. برای اطلاع از خلاقیت های بعدی خود، 20 اصل اساسی طراحی وب را بخوانید.
1.از فونت های قابل خواندن و وب پسند استفاده کنید
نقش تایپوگرافی در طراحی وب را نمی توان نادیده گرفت. استفاده از فونت های مناسب شخصیت برند شما را نشان می دهد و بلافاصله توجه مخاطبان را به خود جلب می کند. با این حال، فقط ظاهر خوب کافی نیست. حروفی که در طراحی وب خود استفاده می کنید نیز باید کاربردی و خوانا باشند. از این گذشته، اگر کاربر مجبور باشد فقط برای دیدن متن شما چشم‌های خود را تنگ تر کند، احتمالاً برای ارتباط با پیام شما دچار مشکل می‌شود.
2. از الگوی "F" استفاده کنید
انسان ها مخلوقات عادت هستند – و نحوه مصرف محتوا نیز از این قاعده مستثنی نیست. یک مطالعه گروه نیلسن نورمن در مورد ردیابی چشم نشان داد که وقتی اطلاعات یک وب سایت را اسکن می کنیم، اکثر ما این کار را به شکل F انجام می دهیم. این بدان معناست که ابتدا عناوین مهم را در بالای صفحه می خوانیم، سپس سمت چپ صفحه را در هر عدد، نقطه گلوله یا نوار کناری اسکن می کنیم، سپس دوباره در سراسر صفحه در هر متن پررنگ یا عنوان فرعی. در طراحی وب، استفاده از الگوی “F” شامل تقلید از مسیر طبیعی چشم است تا در جریان بصری اختلال ایجاد نشود. این به ویژه در صفحه فرود و فروش، جایی که تبدیل هدف نهایی است، بسیار مهم است.
3. از الگوی Z را استفاده کنید
- یا الگوی Z را استفاده کنید
در حالی که الگوی “F” یک الگوی رایج اسکن چشم است، این تنها الگو نیست. طرح Z یکی دیگر از اصول مهم طراحی است. این زمانی است که چشم از چپ به سمت راست بالا اسکن می کند و یک خط افقی خیالی را تشکیل می دهد. آنها، به سمت چپ صفحه پایین می رود و یک خط مورب خیالی ایجاد می کند. در نهایت، دوباره به سمت راست حرکت می کند و یک خط افقی دوم را تشکیل می دهد.
بنابراین، چه زمانی از طرح “Z” به جای “F” استفاده می کنید؟ در حالی که طرح «Z» برای صفحات فرود بهترین عملکرد را دارد، الگوی Z عموماً برای صفحاتی با اطلاعات بسیار کم مناسب‌تر است، جایی که نکته اصلی دعوت به اقدام است.
به احتمال زیاد، شما قبلاً این الگو را در عمل دیده اید – زیرا در صفحه ورود به سیستم فیس بوک استفاده می شود! چشم به طور طبیعی مستقیماً به سمت لوگو می رود، اما الگوی Z کاربران را از طریق دو فراخوان برای اقدام هدایت می کند – ورود به سیستم یا پیوستن.
4. از فضای منفی استفاده کنید
گاهی اوقات، شما می توانید منفی را به مثبت تبدیل کنید! این قطعاً در مورد استفاده از فضای منفی در طراحی وب سایت شما صادق است. همچنین به عنوان فضای خالی یا فضای سفید شناخته می شود، این قسمت های خالی بین عناصر بصری در طراحی شما (به عنوان مثال، عکس ها، متن و نمادها) است.
این اصل به اندازه خود هنر وجود داشته است، اما نقش مهمی در طراحی وب دارد. وب سایت های بیش از حد به هم ریخته و پیچیده تمایل دارند کاربر شما را تحت تأثیر قرار دهند و از اقدام آنها جلوگیری کنند – که دقیقاً برعکس آنچه شما می خواهید است! در همین حال، استفاده از فضای منفی توجه آنها را به مهم ترین محتوا جلب می کند، خوانایی متن را افزایش می دهد و تجربه کاربری یکپارچه ایجاد می کند.
5. طراحی خود را ثابت نگه دارید
شما قبلاً می دانید که ثبات در طراحی وب سایت کلیدی است. اما مهم است که توجه داشته باشید که این به معنای چیزی فراتر از یکنواخت نگه داشتن فونت ها، رنگ ها و نمادهای شما در برند شماست. این همچنین به معنای ثابت نگه داشتن فاصله در چیدمان های شما نیز هست. این به وب‌سایت شما کمک می‌کند تا حسی صیقلی و حرفه‌ای داشته باشید که اعتبار برند را افزایش می‌دهد.
6. پیمایش ساده و منطقی صفحه
یک وب سایت بدون ناوبری واضح مانند یک پیچ و خم بدون نقشه است. مطالعه وب سایت شما را به طور غیر ضروری برای بازدیدکنندگان دشوار و گیج کننده می کند. از سوی دیگر، ناوبری وب سایت با طراحی خوب، تجربه کاربری ساده و آرامش بخشی را برای کاربر به ارمغان می آورد. این می تواند اشکال مختلفی داشته باشد – خواه یک منوی کشویی، نوار کناری یا ناوبری چسبنده باشد. نکته کلیدی این است که مکان یابی آن آسان است، در همه دستگاه ها به خوبی کار می کند و با گزینه های مختلف بیش از حد بارگذاری نمی شود
7. از یک پالت رنگ مکمل استفاده کنید
پالت رنگی که استفاده می کنید حال و هوای طراحی وب شما را تعیین می کند. برای مثال، استفاده از رنگ‌های قهوه‌ای تیره و مشکی می‌تواند حسی روستایی و خوش خلق ایجاد کند، در حالی که رنگ‌های پاستلی می‌توانند کاملاً بازیگوش و مدرن به نظر برسند. به هر حال و هوایی که می‌روید، مهم است که مطمئن شوید رنگ‌هایی که استفاده می‌کنید به خوبی با هم کار می‌کنند. گاهی اوقات، این بدان معنی است که به سایه های مشابه چسبیده اما متضادها نیز می توانند جذب شوند (مثلاً نارنجی و آبی) چه رنگ هایی را انتخاب کنید که در چرخه رنگ مقابل یا در کنار یکدیگر قرار دارند، آنها باید مکمل یکدیگر باشند.
می‌توانید از رنگ‌های مختلف استفاده کنید و همچنان یک وب‌سایت بصری جذاب ایجاد کنید
8. مخاطب را در نظر داشته باشید
طراحان خوب می دانند که فقط ایجاد یک وب سایت نیست که فکر می کنند خوب به نظر می رسد. برای اینکه واقعاً وب سایتی ایجاد کنید که سر و صدای آنلاین را کاهش دهد، آنها باید مستقیماً از طریق طراحی با مخاطبان خود صحبت کنند. خود را به جای مخاطبان خود قرار دهید و از خود بپرسید بزرگترین نیازها، خواسته ها و ترس های آنها چیست. این باید انتخاب های طراحی شما را دیکته کند، از فونت ها و رنگ هایی که استفاده می کنید تا متن دکمه و پیمایش وب سایت شما.
9. بهینه سازی دکمه ها و فراخوان برای اقدام
در حالی که دکمه ها اغلب آخرین چیزی هستند که به طراحی وب اضافه می شوند، اما نقشی ضروری دارند. آنها می توانند عامل تعیین کننده ای باشند که آیا کاربر به پیمایش وب سایت شما ادامه می دهد یا پنجره را می بندد. دکمه های وب سایت شما باید فریاد بزنند، نه زمزمه کنند. یعنی باید در مقابل سایر عناصر بصری صفحه برجسته شوند و به راحتی پیدا و کلیک شوند.
10. سلسله مراتب بصری را حفظ کنید
وقتی به الگوهای اسکن چشم و ناوبری اشاره کردیم، سلسله مراتب بصری را لمس کردیم. با این حال، این یک اصل مهم است که شایسته یک امتیاز خاص خود است! در حالی که طراحی وب سایت باید از نظر زیبایی شناختی و نوآورانه باشد، باید منطقی نیز باشد. یعنی، شما باید عمداً محتوای خود را به گونه‌ای ساختار دهید که برای کاربر منطقی باشد – حتی اگر فقط در سطح ناخودآگاه باشد.
11. به جزئیات توجه کنید
وقتی صحبت از طراحی وب می شود، تصویر بزرگ بدون شک مهم است. از این گذشته، این نحوه جمع شدن همه عناصر بصری است که ظاهر و احساس کلی وب سایت شما را دیکته می کند. با این حال، مهم است که چیزهای کوچک را نادیده نگیرید. توجه به جزئیات ریزتر مانند نمادهای پاورقی، فاصله متن و تعاملات میکرو واقعاً به متمایز کردن وب سایت شما کمک می کند.
12. از قانون فیت استفاده کنید
قانون فیت که توسط روانشناس پل فیتس در سال 1954 ابداع شد، بیان می کند که مقدار زمانی که برای حرکت به سمت هدف نیاز است مستقیماً نه تنها با فاصله آن بلکه با اندازه آن نیز مطابقت دارد. اگرچه این نظریه در ابتدا مربوط به سیستم حرکتی انسان بود، اما اکنون یک اصل اصلی طراحی UX (تجربه کاربر) است. اغلب در رابطه با دکمه‌ها استفاده می‌شود، ایده این است که عناصری که می‌خواهید به راحتی قابل انتخاب باشند (به عنوان مثال، فراخوانی برای اقدام اولیه) باید بزرگ و نزدیک به کاربران قرار گیرند.
12. از قانون فیت استفاده کنید
قانون فیت که توسط روانشناس پل فیتس در سال 1954 ابداع شد، بیان می کند که مقدار زمانی که برای حرکت به سمت هدف نیاز است مستقیماً نه تنها با فاصله آن بلکه با اندازه آن نیز مطابقت دارد. اگرچه این نظریه در ابتدا مربوط به سیستم حرکتی انسان بود، اما اکنون یک اصل اصلی طراحی UX (تجربه کاربر) است. اغلب در رابطه با دکمه‌ها استفاده می‌شود، ایده این است که عناصری که می‌خواهید به راحتی قابل انتخاب باشند (به عنوان مثال، فراخوانی برای اقدام اولیه) باید بزرگ و نزدیک به کاربران قرار گیرند.
13. تصاویر خود را هوشمندانه انتخاب کنید
آنها می گویند یک تصویر هزاران کلمه را ترسیم می کند و این قطعا در طراحی وب سایت صدق می کند. تصویرسازی می‌تواند اهداف بسیاری را در طراحی وب داشته باشد، خواه گفتن یک داستان، نشان دادن نحوه عملکرد یک محصول، برانگیختن احساسات یا ایجاد فضا. با این حال، مهم است که در نظر داشته باشید که همه عکس‌ها یکسان ایجاد نمی‌شوند. مطمئن شوید که عکس هایی را که در طراحی وب خود استفاده می کنید با دقت انتخاب کنید. آنها نه تنها باید از کیفیت حرفه ای و وضوح بالا برخوردار باشند، بلکه باید با زیبایی شناسی کلی شما مطابقت داشته باشند و هدف مشخصی داشته باشند.
14. تجربه کاربری را در اولویت قرار دهید
تجربه کاربری فقط برای طراحان UX نیست. هرکسی که می‌خواهد مخاطبانش در وب‌سایتشان اقدامی انجام دهند (خواه اشتراک در لیست پستی باشد یا خرید چیزی) باید به سفر مشتری توجه کند. خبر خوب این است که این لزوماً نباید یک فرآیند پیچیده یا بسیار فنی باشد. این صرفاً در مورد آسان کردن هرچه بیشتر مخاطبان برای برداشتن مراحل مورد نظر است.
15. استفاده از سیستم های شبکه ای را در نظر بگیرید
استفاده از طرح‌بندی شبکه‌ای یک راه اشتباه برای اینکه وب‌سایت شما مرتب، منظم و حرفه‌ای به نظر برسد، است. در اصل، اینها خطوط افقی و عمودی متقاطع هستند که به عنوان راهنما برای قرار دادن و تراز کردن عناصر در ترکیب شما عمل می کنند. این یک ابزار بصری قدرتمند است که یکپارچگی و نظم را در طراحی شما ایجاد می‌کند – که می‌تواند به ویژه در مواقعی که اتفاقات زیادی در جریان است مفید باشد!
16. از تکه های بزرگ متن اجتناب کنید
شما فقط یک بار فرصت دارید که در یک بازدیدکننده جدید وب سایت تاثیر اولیه خوبی داشته باشید. به همین دلیل بسیار مهم است که پیشنهاد برند خود را فوراً برای مخاطبان خود روشن کنید. در حالی که این تا حدودی به کپی رایتینگ شما (محتوای نوشته شده) مربوط می شود، طراحی وب سایت شما نیز نقش مهمی ایفا می کند. به همین دلیل، استفاده از تکه‌های بزرگ متن در وب‌سایت شما، به‌ویژه در صفحه اصلی‌تان، یک «نه» قطعی است. نه تنها می تواند پیام برند شما را کمرنگ کند، بلکه می تواند وب سایت شما را به هم ریخته و نامرتب نشان دهد.
17. از عدم تغییر استفاده کنید
اصل تغییر ناپذیری زمانی است که شما یک گزینه متفاوت را در میان یک گروه همگن قرار دهید. این می تواند یک ابزار ضروری برای طراحی جداول قیمت در وب سایت شما باشد.
18. قانون هیک
در خارج از دنیای طراحی، این اصل به طور کلی به عنوان “خستگی تصمیم گیری” نامیده می شود ، هرچه بیشتر کاربر خود را با گزینه‌های بسیار زیاد بارگذاری کنید (خواه دکمه‌ها یا گزینه‌های منو) بیشتر طول می‌کشد تا آنها را برای انجام اقدام ترغیب کنید. و از آنجایی که شما معمولاً فقط یک فرصت بسیار باریک برای تأثیرگذاری دارید، این چیز خوبی نیست! به همین دلیل است که بسیار مهم است که فراخوان‌ها را محدود کنید و آن‌هایی را که استفاده می‌کنید تا حد امکان مؤثر کنید.
19. از تقارن استفاده کنید
در حالی که زمان و مکانی برای طرح های انتزاعی تر و نامتقارن وجود دارد، نمی توانید با تقارن اشتباه کنید. با اشاره به زمانی که دو نیمه از یک کل به طور کامل یکدیگر را منعکس می کنند، این یک راه آسان است که بلافاصله طراحی وب سایت شما متعادل تر، منظم تر و حرفه ای تر به نظر برسد.
20. طراحی هم برای وب و هم برای موبایل
اگر فقط به یک اصل طراحی وب سایت توجه می کنید، آن را به این یکی تبدیل کنید! گوشی‌های هوشمند راه به جایی نمی‌برند – در واقع، آنها به طور فزاینده‌ای به محبوب‌ترین روشی برای مصرف محتوا تبدیل می‌شوند. به همین دلیل است که طراحی با در نظر گرفتن دسکتاپ و موبایل بسیار مهم است. این به این معنی است که مطمئن شوید سرصفحه‌ها و پاراگراف‌های شما در هر دو دستگاه به خوبی کار می‌کنند، هیچ تصویر یا سایر عناصر بصری قطع نشده‌اند و استفاده از دکمه‌های شما در یک صفحه کوچک آسان است. همچنین شامل اطمینان از بارگیری سریع وب سایت شما در هر دو دستگاه است.
بهینه سازی وب سایت خود برای تلفن همراه گاهی اوقات به معنای استفاده از طرح بندی های مختلف برای دسکتاپ است. این را می توانید در نسخه موبایل فرندل مثال بالا مشاهده کنید. در اینجا، آنها از یک تصویر تمام صفحه و طراحی شبکه ای به طور خاص برای بهبود تجربه تلفن همراه استفاده کرده اند. این نشان می دهد که چرا باید طراحی برای موبایل و وب را به عنوان دو موجودیت مجزا در نظر گرفت. همچنین، فراموش نکنید که قبل از راه‌اندازی نسخه وب‌سایت تلفن همراه، پیش‌نمایش آن را مشاهده کنید.
کلام آخر
رعایت این اصول طراحی باعث نمی شود که به قوانین پایبند باشید. این به سادگی تضمین می کند که شما یک پایه قوی دارید، بنابراین می توانید ریسک کنید و در جایی که مهم است آزمایش کنید. همچنین، فراموش نکنید که قبل از راه‌اندازی نسخه وب‌سایت تلفن همراه، پیش‌نمایش آن را مشاهده کنید.
ایده های خلاقانه محتوای وب سایت را EL-WEB دریافت کنید. شما می توانید رعایت این قوانین را در وب سایت ما، مشاهده کنید. جهت مشاوره یا سفارش طراحی با ما می توانید به راحتی تماس بگیرید.
به یاد داشته باشد که وب سایت شما ماندد آینه ای انعکاس دهنده برند و تجارتت شماست. بنابر این طراحی مناسب آن، نقش برجسته ای در ذهن کاربران خواهد داشت. با ما، در ذهن مشتریان تان ماندار شوید.
