مهمترین الگوهای طراحی وب در سال 2021 که باید بدانید
با توجه به توسعه فناوری و ابداع الگوها و قابلیتهای جدید، هر ساله شاهد معرفی رویکردهای جدید در زمینه طراحی وب هستیم. به بیان دیگر، همانگونه که طراحی وب در دوره ابتدایی جاوا اسکریپ با زمانی که کتابخانه های متعدد و قدرتمندی نظیر jQuery معرفی شدند به صورت قابل ملاحظه ای دستخوش تغییرات شد، هر ساله شاهد بروز چنین تغییراتی هستیم.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
البته دامنه این تغییرات در طراحی همواره در یک سطح نبوده و در مواردی تنها به اصلاحاتی در ظاهر طراحی ها خلاصه شده با اینحال پیروی از چنین الگوهایی سبب می شود که وب سایت ما همواره مورد توجه کاربران قرار بگیرد.این نکته هم لازم به ذکر است که الزامی به پیروی از این رویکردها وجود ندارد ولی اگر وب سایت شما به عنوان یک منبع مهم درآمدزایی برای شما شناخته می شود و یا شما قصد دارید از طریق کیفیت طراحی وب سایت، توانایی های خودتان رو به مشتریان بالقوه ارائه کنید، به روز بودن بسیار حیاتی و مهم خواهد بود.
اگرچه ممکن است پیروی از مد و الگوهای جدید در همه موارد چندان پسندیده نباشد، ولی در زمینه طراحی وب یک نیاز حقیقی و انکار ناشدنی است. چرا که مشتریان شما، طراحی شما را با رقبای بالقوه شما مقایسه می کنند و عقب ماندن از قافله تغییرات یقینا نتایج خوبی به همراه نخواهد داشت. در خاطر داشته باشید، موفقیت یک وب سایت تنها به بهینه سازی وابسته نیست و طراحی نقشی کلیدی را در این زمینه بازی می کند.بر همین اساس، در طی چند مقاله به بررسی الگوهای جدید طراحی معرفی شده برای سال 2021 خواهیم پرداخت.
مینیمالیسم
مساله مینیمالیسم سال هاست که در حوزه ادبیات و سینما مورد توجه بوده ولی در زمینه طراحی وب نیز بهره های فراوانی از آن برده شده است. در واقع، علاوه بر این که یک طراحی مینیمال به کاربر اجازه می دهد تا به هدف و رسالت اصلی وب سایت توجه کند، تجربه کاربری لذت بخشی را نیز برای او به ارمغان می آورد.
قطعا برای همه ما پیش آمده که وارد یک وب سایت شلوغ و پر از عناصر گرافیکی و متن و ... شده ایم و برای اینکه هدف اصلی خودمان را دنبال کنیم – مانند خرید، ثبت نام، دانلود فایل و مانند آن – دچار مشکلات زیادی شده ایم. این مساله گاها سبب از دست رفتن ثانیه های طلایی در جذب کاربر و تبدیل او به مشتری و احیانا کاربر دائمی خواهد شد و این بزرگترین ضربه ای است که یک وب سایت و کسب و کار ممکن است از طراحی نامناسب خود دریافت کند.
به عنوان نمونه، میتوان به دو طراحی فاجعه بار زیر اشاره کرد. البته این نمونه ها واقعا بد هستند و اینکه کسی بتواند چنین وب سایتی طراحی کند خیلی بعید است. با اینحال، طراحی شما در حالی که تصور می کنید خوب و ایده آل است، ممکن است دچار مشکلاتی از قبیل شلوغ بودن بیش از اندازه و استفاده افراطی از عناصر گرافیکی باشد.
-----------------------------------------------------------------------------------------------------------------
از سوی دیگر، اگر همه چیز در طراحی ما سر جای خودش باشد و مشکلی با هدایت کاربران نداشته باشیم، طراحی مینیمال می تواند زیبایی بصری قابل توجهی را به وب سایت اضافه کند. ممکن است برخی تصور کنند که طراحی زیبا و دلپذیر اهمیت زیادی ندارد ولی جالب است بدانید که بخش مهمی از اثرگذاری یک طراحی به جذابیت های بصری آن مربوط است و این مساله ریشه در روانشانسی و تمایل ذاتی انسان به زیبایی دارد. پس این مساله را دست کم نگیرید.
اگرچه طراحی مینیمال در سال ای گذشته هم به عنوان یکی از الگوهای جالب طراحی مورد توجه قرار گرفته بود، برای سال 2021 هم طراحی مینیمال همچنان جایگاه ویژه ای دارد و توصیه شده است که با رعایت اصول زیبایی شناسی از طراحی مینیمال استفاده شود.در ادامه چند نمونه از طراحی های مینیمال جالب توجه را بررسی می کنیم.
- https://oboosho.com
طراحی فوق مینیمال و زیبای این وب سایت، در کنار ترکیب رنگ عالی و استفاده کاملا مناسب از عناصر گرافیکی، وب سایت را تبدیل به یک نمونه فوق العاده از طراحی مینیمال کرده است. البته با مشاهده این وب سایت از کیفیت طراحی واسط کاربری آن هم لذت خواهید برد.
https://onthesamepage.online/about
این طراحی را می توان یک نمونه کامل از طراحی های مینیمال دانست با اینحال استفاده از چنین الگوهایی در همه موارد پیشنهاد نمی شود. باید دقت داشت که استفاده از رویکرد مینیمال حداکثری فقط در مواردی توجیه دارد که با هدف وب سایت همخوانی داشته باشد، در غیر اینصورت قطعا موجب شکست طراحی و فراری دادن کاربران می شود!
زمانی که از یک طراحی مینیمال استاندارد صحبت می کنیم، منظورمان چنین طراحی ای است. یک نمونه مناسب که همخوانی رنگ های مکمل در آن به خوبی ایجاد شده و مینیمالیسم در خدمت طراحی بوده نه تنها به منظور به رخ کشیدن طراحی. در واقع، علاوه بر این که اطلاعات ضروری در این طراحی گنجانده شده و کاربران را دچار سردرگمی نکرده، از به کارگیری هرگونه عنصر اضافی و برهم زننده تمرکز نیز خودداری شده است.
همانند نمونه پیشین، این طراحی نیز با حذف عناصر و اِلِمان های زائد، موفق شده تجربه کاربری جالب توجهی را ارائه کند و در عین حال پیام نهایی و اصلی خود را به کاربر منتقل کند. استفاده از تصاویر که رنگ بندی پویا و شادابی نیز دارند توانسته حالت یکنواختی طراحی را به خوبی مدیریت کرده و حس و حال سرزندگی را به کاربر منتقل کند.
علاوه بر استفاده از سیستم هدایت کاربری متفاوت خود که به وسیله آن توانسته میزان حجم محتوای صفحات را مدیریت کند، این طراحی استفاده مناسبی از عناصر مینیمال و رنگ های جلب کننده توجه داشته است. در مجموع، استفاده مناسب و هوشمندانه از رنگ ها توانسته این طراحی مینیمال را به یک نمونه جذاب تبدیل کند.
استفاده از تصاویر مناسب و واقعی (و نه تزئینی) که انتقال دهنده پیام و هدف کسب و کار مورد نظر باشد می تواند مشکل انتخاب رنگ برای طراحی های مینیمال را تا حدود بسیار زیادی رفع کند. این همان الگویی است که این طراحی از آن بهره جسته و توانسته نمونه مناسبی را خلق کند. البته باید توجه داشت که انتخاب تصاویر نیز فرایند چندان ساده ای نیست و برای دستیابی به چنین کیفیتی باید وقت، تفکر و احیانا هزینه کافی صرف شود.
https://bacca.online
به عنوان آخرین نمونه در این طراحی مشاهده می کنیم که چگونه می توان از اصول مینیمال برای طراحی یک فروشگاه اینترنتی استفاده کرد. علاوه بر تمامی مواردی که تاکنون راجع به آن صحبت شد، طراحی مینیمالیستی یک فروشگاه می تواند عمیقا حس حرفه ای و با کلاس ! بودن را به کاربران و مشتریان بالقوه القا کند.
پیش از ادامه به این رویکرد، لازم به ذکر است که ممکن است استفاده از تمامی الگوهای معرفی شده در یک طراحی مشخص امکان پذیر نبوده و حتی باعث ایجاد تناقض شود.مساله مهم در این زمینه این است که با توجه به ویژگی ها و کاربری وب سایت موردنظر، بهترین و مناسبترین الگوی طراحی را برای آن انتخاب کنیم. در این صورت، می توان امیدوار بود که طراحی جدید و منطبق بر الگوهای جدید ما، برای کاربران نیز قابل استفاده بوده و فرایند تعامل آن ها با وب سایت را تسهیل کند.
رنگ های راحت
بدون شک نخستین عنصر از یک طراحی که به چشم می آید ترکیب رنگ استفاده شده در طراحی است. اگرچه در این زمینه دست طراحان باز است و می توانند هر ترکیب رنگ مورد نظر خود را در طراحی به کار گیرند، با اینحال یک سری از محدودیت ها سطح بالا باید در نظر گرفته شود. مساله ای که تا امروز مهم بوده، همخوانی ترکیب رنگ وب سایت با ویژگی و احیانا رنگ های برند مورد نظر است. مساله جدیدی که در این زمینه اهمیت بیشتری پیدا کرده است، جلوگیری از خستگی چشم کاربران است.
یک کاربر در طی روز ممکن است ده ها و یا صدها صفحه وب و وب سایت مختلف را بررسی کند و طبیعتا چشم او دچار خستگی می شود. از این رو، استفاده از رنگ های راحت که برای چشم های کاربر کمتر آزار دهنده باشد و در حالت ایده آل باعث استراحت آن ها شود، از اهمیت بیشتری برخوردار است.
این موضوع زمانی اهمیت بیشتری پیدا می کند که بدانیم یکی از عوامل کلیدی باقی ماندن طولانی مدت کاربران در یک صفحه – که خود آن ها نیز ممکن است نسبت به آن خودآگاهی نداشته باشند – به کار گیری رنگ های آرامش بخش و به اصطلاح راحت (Comfortable Colors) در طراحی است.
به خاطر داشته باشید که استفاده از این الگو نباید با سیاست برجسته کردن برند و رنگ های اساسی آن در تضاد باشد. البته، در مواردی طراحان رنگ های برند و لوگو را فدای سیستم رنگی یکپارچه و آرامش بخش سایت می کنند که این نیز می تواند در برخی موارد – و از طریق اعتبار سنجی های اولیه- در دستور کار قرار بگیرد. همچنین، جامعه کاربری هدف، کاربرد و هدف نهایی وب سایت نیز در انتخاب رنگ مناسب از اهمیت بسیار زیادی برخوردار است.
البته مساله روانشنانسی رنگ ها و اینکه چه رنگ هایی برای چه کاربردهایی مناسب هستند، مبحث طولانی و جامعی است که به امید خدا در آینده به آن خواهیم پرداخت.
در ادامه چند نمونه از طراحی های برجسته که از رنگ های آرام و مناسب برای سیستم بینایی کاربران استفاده کرده اند را بررسی می کنیم.
https://tabooorganics.com
این طراحی نشان می دهد که چگونه می توان از رنگ های آرام و به دور از هرگونه بازی اضافه با رنگ ها یک طراحی مناسب برای یک فروشگاه اینترنتی داشت. البته این طراحی دو اشکال عمده و کلیدی دارد.
نخست اینکه دو دکمه اصلی در قسمت بالای صفحه (above the fold) در هنگام عبور نشانگر ماوس تغییر رنگ نمی دهند و اساسا طراحی مناسبی برای یک دکمه عملیاتی (Action Button) ندارند. مساله دیگر، عکس های انتهای صفحه و بالاتر از بخش فوتر وب سایت به شدت ضعیف طراحی شده اند در حالیکه به راحتی می شد از ساختارهای مختلفی برای بهبود آن استفاده کرد.
اگرچه در این طراحی سعی شده با استفاده از افکت های انیمیشن و متحرک، جذابیت و سرزندگی به طراحی اضافه شود، نقش انتخاب رنگ در این طراحی انکار ناشدنی است. همچنین، همخوانی رنگ پس زمینه و عناصر گرافیکی تعادل و بالانس خوبی را برای سیستم بینایی کاربر ایجاد کرده است. در واقع این طراحی یک نمونه کامل از مواردی است که باعث خستگی چشم کاربر نمی شود. علاوه بر این، دکمه های عملیاتی در این نمونه به خوبی طراحی و متمایز شده اند.
https://www.zendesk.com/platform
این طراحی علیرغم اینکه بسیار ساده به نظر می رسد و رنگ مناسب و آرام کننده دارد، تلاش کرده کاربر را غافلگیر کند. اگرچه این ایده ممکن است برای برخی جالب باشد، با اینحال ممکن است چشم و ذهن کاربران را دچار ناراحتی کند. در مجموع، این طراحی یک نمونه ایده آل محسوب نمی شود ولی می توان از آن در برخی موارد الگو برداری کرد.
یک طراحی جمع و جور، زیبا و حرفه ای که از کارکرد عنصر رنگ به بهترین نحو ممکن استفاده کرده است. در این طراحی دقت داشته باشید که چگونه عناصر گرافیکی رنگی تعادل را با پس زمینه ساده و آرام برقرار کرده است. نکته جالب در این طراحی، نوع فونت به کار رفته است که همخوانی خوبی با هدف و کاربرد وب سایت دارد.
در این طراحی عناصر گرافیکی و انیمیشن بیشتر از هر عنصر دیگری به چشم می آیند ولی به هیچ عنوان نباید از انتخاب رنگ عالی آن چشم پوشی کرد. این شِمای رنگی، علاوه بر آرام و روان بودن، به خوبی اجازه تمرکز به پیش زمینه (عناصر گرافیکی و محتوا) را داده است. در مجموع این طراحی را می توان یک نمونه خوب و کاربردی از طراحی های مینیمال نیز دانست.
به احتمال زیاد وقتی صحبت از طراحی وب می شود، اعداد برای ما از اهمیت زیادی برخوردار نیستند. در واقع، زمانیکه باید صرف طراحی عناصر گرافیکی و ساختار صفحات و محتوای آن شود، تقریبا تمامی فرایند طراحی را به خود مشغول می کند و دیگر وقت و توجهی برای تمرکز بر اعداد باقی نمی ماند.
اگر چه این رویه چندان هم نادرست نیست و اعداد از جایگاه کم رنگتری به عنوان اجزای طراحی برخوردار هستند، قدرت و اهمیت آن ها را نباید دست کم گرفت. به عبارت دیگر، اعداد - البته در صورت استفاده مناسب و صحیح - نقش بسیار مهمی در فرایند انتقال پیام به عهده دارند و می توانند به عنوان قلاب (Hook) جذب کننده توجه کاربران مورد استفاده قرار بگیرند.
همین مساله باعث شده تا رویکرد طراحی داده-محور (Data-Driven Design) بسیار بیشتر از قبل مورد توجه قرار بگیرد و به عنوان یکی از رویکردهای طراحی در سال آینده در نظر گرفته شود.
در استفاده از این الگوی طراحی باید توجه داشت که اعداد به کارگیری شده می بایست نشان دهنده یک واقعیت مشخص و قابل لمس باشند، در واقع همان چیزی که کاربر به دنبال آن است یا حقیقتی که می تواند به تصمیم گیری کاربر کمک کند. نمونه هایی از چنین آمار و ارقامی عبارتند از تعداد دانلودها، تعداد کاربران، زمان شروع یک رویداد، میزان تخفیف و ... .
همچنین، توجه داشته باشید که این اعداد ارقام باید به خوبی از پس زمینه متمایز شده و قابل مشاهده باشند (به وسیله رنگ و سایز متفاوت قلم) در غیر اینصورت اثربخشی خود را تا حد بسیار زیادی از دست می دهند. معمولا ارائه توضیحات متنی مختصر در کنار این داده ها می تواند به کاربران کمک قابل توجهی در تفسیر آن ها داشته باشد.
در ادامه چند نمونه طراحی جالب توجه براساس این الگو را مشاهده خواهید کرد.
bucketlist
anemoimarine
decathlon
creativeweek
covid19virusdata
getpennies
MCI
در مقالات قبلی به چندین نمونه از الگوهای استاندارد طراحی در سال جدید اشاره کردیم و در این قسمت نیز به چند نمونه دیگر می پردازیم. در واقع، بررسی تمامی الگوهایی که توسط طراحان برتر مورد استفاده قرار می گیرد تا حدودی غیر ممکن است. با اینحال، هدف این سلسله مقالات اشاره به نمونه های جالب توجه و ارزشمندی است که می تواند به مخاطبان گرامی در مسیر طراحی وب سایت های جذاب و کاربردی تر کمک نماید.
طراحی نامتقارن
به صورت کلی، تصور ما از طراحی این است که تمامی عناصر صفحه و قاب بندی و layout می بایست به صورت متقارن و همگن در صفحه مورد استفاده قرار گیرند. اگرچه این مساله، در اصل، صحیح است ولی گاهی اوقات تغییر الگوهای پیش فرض نه ایجاد مشکلی نمی کند، بلکه سبب جلب توجه و به اصلاح به چشم آمدن طراحی می شود. ایده طراحی نامتقارن نیز از همین اصل پیروی می کند و هدف آن، این است که با تغییر ساختار طراحی و لایه بندی عناصر در صفحه، به گونه ای توجه بازدیدکنندگان را جلب کند.
نمونه های زیر را می توان از موارد جالب طراحی براساس این الگو برشمرد.
effectlab
homesociete
15finches
همانگونه که در این نمونه ها مشاهده کردید، برخلاف طراحی استاندارد، طراحی ساختار صفحه از الگوی خاصی پیروی نمی کند و همه چیز در خدمت هدف و طراحی و آنچه طراح در ذهن خود داشته است، می باشد. در واقع، می توان این نوع طراحی را نوعی فرار از سبک های رایج و مشابه آثار گرافیست ها و نقاش های سبک های مدرن دانست که پیروی از اصول طراحی را رها کرده و به دنبال انتقال پیام با استفاده از هر ابزاری رفته اند.
البته باید توجه داشت که چنین طراحی هایی در زمینه هایی که تعداد زیادی از کاربران از گروههای مختلف مد نظر هستند، به هیچ عنوان توصیه نمی شود. چرا که به احتمال فراوان سبب بروز مشکل در فرایندهای کلیدی نظیر ثبت نام و خرید خواهد شد. با اینحال، آگاهی از این نوع طراحی می تواند پنجره ای نو به روی افق طراحی ما بگشاید.
طراحی با الهام از صنعت چاپ
یکی از نخستین مسائلی که در دوره های آموزش طراحی وب به آن اشاره می شود این است که طراحی برای وب به صورت کلی با طراحی برای چاپ متفاوت است. این تفاوت چه از دیدگاه معماری اطلاعات و بازنمایی و چه روانشناسی رنگ و سازماندهی محتوا مورد توجه است و از این رو این دو حوزه طراحی به صورت جدی از هم متفاوت هستند.
با اینحال، ایده استفاده از الگوهای قدیمی چاپ برای طراحی مدرن اخیرا بیشتر مورد توجه قرار گرفته است و همانگونه که مثالهای زیر می توانید مشاهده کنید، می تواند حس و حال جالبی را هم به بازدیدکنندگان منتقل نماید. البته باید توجه داشت که هدف از این نوع طراحی - که یک نمونه روبه عقب یا retro می باشد- بیشتر تاکید بر جنبه های هنری طراحی است و عموما برای وب سایتهایی با رویکرد هنری و یا رویدادهای مشابه مورد استفاده قرار می گیرد. البته، با اضافه کردن چاشنی خلاقیت، می توان از این نوع طراحی برای وب سایتهای پربازدید نیز استفاده کرد.
شاخصه های اصلی چنین طراحی هایی، استفاده از قالب بندی شبیه روزنامه ها، کتاب ها و بروشورها و همچنین تمرکز بر استفاده از متن - تایپوگرافی - و محدود کردن استفاده از رنگ هاست.
theberlage
thisistommy
newyorker
roalddahl