استفاده از الگوهای طراحی مدرن در ساختار صفحات وب

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

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

برای مشاهده تخفیف های ویژه امروز کلیک کنید

سرفصل های این مطلب

مینیمالیسم

رنگ های راحت

bucketlist

anemoimarine

decathlon

creativeweek

covid19virusdata

getpennies

MCI

طراحی نامتقارن

effectlab

homesociete

15finches

طراحی با الهام از صنعت چاپ

theberlage

thisistommy

newyorker

roalddahl

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

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

مینیمالیسم

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

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

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

الگوهای طراحی وب سال 2021

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

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

https://oboosho.com

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

الگوهای طراحی وب سال 2021

https://onthesamepage.online/about

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

الگوهای طراحی وب سال 2021

https://narrator.mauer.co

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

الگوهای طراحی وب سال 2021

https://hous.eu

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

الگوهای طراحی وب سال 2021

https://mytfcard.com

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

الگوهای طراحی وب سال 2021

https://sheadesign.com

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

الگوهای طراحی وب سال 2021

https://bacca.online

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

الگوهای طراحی وب سال 2021

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

رنگ های راحت

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

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

این موضوع زمانی اهمیت بیشتری پیدا می کند که بدانیم یکی از عوامل کلیدی باقی ماندن طولانی مدت کاربران در یک صفحه – که خود آن ها نیز ممکن است نسبت به آن خودآگاهی نداشته باشند – به کار گیری رنگ های آرامش بخش و به اصطلاح راحت (Comfortable Colors) در طراحی است.

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

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

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

https://tabooorganics.com

الگوهای طراحی وب

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

نخست اینکه دو دکمه اصلی در قسمت بالای صفحه (above the fold) در هنگام عبور نشانگر ماوس تغییر رنگ نمی دهند و اساسا طراحی مناسبی برای یک دکمه عملیاتی (Action Button) ندارند. مساله دیگر، عکس های انتهای صفحه و بالاتر از بخش فوتر وب سایت به شدت ضعیف طراحی شده اند در حالیکه به راحتی می شد از ساختارهای مختلفی برای بهبود آن استفاده کرد.

https://matterapp.com

الگوهای طراحی وب

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

https://www.zendesk.com/platform

الگوهای طراحی وب

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

https://www.takeshape.io

الگوهای طراحی وب

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

https://ark.ng

الگوهای طراحی وب

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

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

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

همین مساله باعث شده تا رویکرد طراحی داده-محور (Data-Driven Design) بسیار بیشتر از قبل مورد توجه قرار بگیرد و به عنوان یکی از رویکردهای طراحی در سال آینده در نظر گرفته شود.

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

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

منبع

https://tosinso.com/