10 روند هیجان انگیز طراحی وب سایت در 2019

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

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

در ادامه 10 روند طراحی وب سایت آمده است که احتمالا در سال جاری بیشتر با آن ها در وب سایت های مختلف بر خواهید خورد:

طرح بندی نا متقارن و شبکه های شکسته

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

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

وب سایت Times Talks، showcase ها در بیشتر سایت در یک شبکه شکسته به کار گرفته شده اند، بخصوص در قسمت Hero Area.

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

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

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

طراحی روان

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

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

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

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

طرح های نوستالژیک

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

سایت Statamic از رنگ های Retro که در دهه 1980 مد بود استفاده می کند. به کاربردن نوستالژی و طراحی Retro می تواند مجاورت زیبایی را بین طراحی امروز و گذشته به وجود آورد.

وب سایت Great Jones ویژگی های تایپوگرافی و طرح رنگی دهه 1970 استفاده کرده است، طراحی زیبایی که تا قبل از ARPANET در سال 1983 رایج بود.

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

استفاده بهتر از تصاویر

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

وب سایت KOBU تصاویری دارد که به جای یک تصویر استاندارد، فردی از آن برش داده شده است، و این اجازه را می دهد که طرح بین قطع های (برش) اعضای تیم جریان یابد.

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

تک رنگ و بدون رنگ

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

وب سایت Digital Bro با یک تم رنگ زرد و یک فام بسیار نادر (سیاه و سفید به عنوان خنثی در نظر گرفته می شود) استفاده می کند.

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

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

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

وب سایت Mad Studio ویژگی های همپوشانی را به عنوان طراحی زیبایی شناسی در سراسر سایت، با انیمیشن های ظریف که باعث می شود وب سایت احساس سه بعدی داشته باشد، استفاده کرده است.

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

مناطق کلیدی و هدر ها

همانطور که در بالا ذکر شد، اکثر مناطق مهم (above the fold) دارای یک تصویر بزرگ هستند، که تمام صفحه را اشغال می کنند، و اغلب با متنی در بالای صفحه توجه بیننده را جلب می کنند. در طول چند سال گذشته، در این حوزه (به احتمال زیاد مهم ترین منطقه) تجربه آزمایشی زیادی وجود نداشته است.

یک رویکرد منحصر به فرد به این منطقه کلیدی توسط Zoo Creative  انجام شده است (استفاده از این فضا به عنوان بیلبورد و انیمیشن های هوشمندانه).

در حالی که برخی از وب سایت ها شروع به حرکت دادن مرزهای آنچه که ممکن است در قسمت های هدر وب سایت ها وجود داشته باشد، کرده اند و در حالی که ما از نوع رایج full-width-image-with-text بیش از حد استفاده می کنیم، من انتظار دارم که خلاقیت و تنوع بیشتری توسط طراحان وب در این قسمت انجام بگیرد.

ناوبری های بزرگ و کاربردی

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

وب سایت 56 Digital یک ناوبری نسبتا بزرگ را به نمایش می گذارد، که مرکز وب سایت را به خود اختصاص داده است به جای اینکه بخش کوچکی از سایت باشد.

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

فضای سفید بیش از اندازه

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

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

گسترش مرزهای تایپوگرافی

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

وب سایت Kurppa Hosk با تایپوگرافی و اضافه کردن انیمیشن و تعامل کاربر با متن خلاقیت ایجاد کرده است (متن در اطراف مکان نمای کاربر به شکل دایره ایی منفجر می شود).

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

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

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

کلام آخر

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