جدیدترین نمونه‌های طراحی وب‌سایت

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

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

در ادامه نمونه‌های طراحی وب‌سایت که به‌احتمال خیلی زیاد در سال جدید شاهدشان خواهیم بود را با هم بررسی می‌کنیم.

۱- گرید (Grid) شکسته و طرح‌های نامتقارن

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

برای مثال، وب‌سایت Times Talks یک طرح گرید شکسته را در سرتاسر سایت خود و به‌خصوص در ناحیه hero و بخش‌های مختلف سایت اجرا کرده است.

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

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

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

۲- طراحی و عناصر سیال/ ارگانیک

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

در بخش کوچکی از سایت Wandering Aimfully می‌بینیم که از شکل‌های ارگانیک و خطوطی پشت تصاویر دایره‌ای به‌عنوان یک عنصر پس‌زمینه استفاده شده است.

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

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

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

۳- طراحی‌های نوستالوژیک و یادآور گذشته

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

برای مثال در سایت Statamic شاهد استفاده از یک طرح رنگی یکپارچه با رنگ‌های روشن هستیم که یادآور دهه ۱۹۸۰ است.

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

وب‌سایت Great Jones بر مبنای یک تایپوگرافی و طرح رنگی از دهه ۱۹۷۰ شکل گرفته است؛ یک سبک طراحی که قبل از آرپانت در ۱۹۸۳ رایج بود.

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

۴- استفاده بیشتر و هدفمندتر از تصاویر

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

در سایت KOBU از یک طرح تصویری برش خورده استفاده شده است.

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

سایت Drip تصاویری را نمایش می‌دهد که برش داده شده‌اند و برای جلب‌توجه بیشتر به تصویر از طرح‌ها و شکل‌ها استفاده‌شده است که البته بیشتر روی طراحی خود سایت تأکید دارد.

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

۵- تک رنگی و استفاده از رنگ

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

Digital Bro از یک طرح رنگی مونوکروماتیک بهره می‌برد که در آن از یک طیف رنگ زرد استفاده شده است و برای خنثی‌سازی نیز از رنگ‌های سیاه‌وسفید بهره گرفته شده است.

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

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

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

۶- هم‌پوشانی عناصر طراحی

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

وب‌سایت Mad Studio حاوی عناصر هم پوشان در صفحه اصلی است و برای ایجاد یک احساس سه‌بعدی بودن از انیمیشن‌های ظریفی نیز استفاده شده است.

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

سایت Hers هم‌پوشانی عناصر را در بخش‌هایی از سایت خود نشان می‌دهد؛ از جمله بخش اصلی در صفحه اصلی سایت.

استفاده از عناصر هم پوشان که فضای مشترکی دارند ترندی است که در سال جدید و در سالی که سایت‌ها به دنبال سبک‌های سه‌بعدی می‌روند بیشتر خواهیم دید.

۷- تجدید نظر در بخش‌های hero و هدر سایت

نکته: hero به بخشی از سایت گفته می‌شود که در آن از تصاویر یا متن‌هایی با سایز بزرگ برای جلب‌توجه استفاده شده است.

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

برای مثال شاهد هستیم که در سایت Zoo Creative از یک شیوه نوآورانه برای نمایش بخش hero استفاده شده است.

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

در سایت Andreas Nymark می‌بینیم که یک فضای خالی بسیار بزرگ در بالای بخش hero وجود دارد و یک هدینگ ساده نیز در پایین بخش hero  قرار گرفته است.

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

۸- ناوبری‌های بزرگ و تجربی

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

وب‌سایت ۵۶ Digital یک ناوبری نسبتاً بزرگ را به نمایش می‌گذارد و در آن ناوبری سایت در بخش مرکزی قرار گرفته است.

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

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

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

۹- استفاده بیشتر از فضاهای سفید

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

وب‌سایت Daniel Bodda از یک فضای سفید بسیار بزرگ در هدینگ سایت بهره گرفته است که توجهات زیادی را جلب می‌کند.

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

سایت Maxime Rimbert از یک فضای بسیار بزرگ سفید استفاده می‌کند تا بتواند توجهات بیشتری را به موارد قرار گرفته در زیر جلب کند.

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

۱۰- جابجا کردن مرزهای تایپوگرافی

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

در سایت Kurppa Hosk می‌بینیم که در تایپوگرافی از انیمیشن‌ و تعاملات کاربری استفاده شده است.

جابجا کردن مرزهای تایپوگرافی می‌تواند شامل مواردی مانند برش یا هدفمند کردن بخش‌هایی از حروف و کلمات (با تکیه‌بر فضای منفی برای پر کردن بقیه حروف)، عکاسی درون تایپوگرافی، تایپ روی خط یا شکل، تاپیوگرافی انیمیشنی و… باشد.

وب‌سایت ARCHE68 از سبکی از تایپوگرافی استفاده می‌کند که با استفاده از این سبک سعی شده است نمایی دو بعدی سایت به سه بعدی تغییر یابد.

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

چند نکته…

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

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

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