بهمن ۲۱, ۱۳۹۶

با جدیدترین روندهای طراحی وب در سال ۲۰۱۸ آشنا شوید

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

چشم انداز طراحی وب به طور مدارم در حال تکامل است. چیزی که دیروز مدرن و تازه به نظر می‌رسید ممکن است امشب از مد افتاده شود. در ادامه طراحی‌های جدید سال ۲۰۱۸ را بررسی کنید و از آن‌ها الهام بگیرید تا طرح‌های وب را به سبک خود در سال جاری ایجاد کنید.

۱- تایپوگرافی بُلد (Bold)

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

۲- سینماگرافی‌ در طراحی وب

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

۳- بی‌رحمی در طراحی یا بروتالیسم

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

۴- طراحی با لایه‌های رنگارنگ

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

۵- فقط متن!

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

۶- تصاویر

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

۷- فوق مینمالیسم

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

۸-ترکیب متن‌های افقی و عمودی

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

۹- همپوشانی متن و تصویر

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

۱۰- اشکال غیر هندسی

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

۱۱- میکرواینتراکشن‌ها در وب

افزودن انیمیشن‌های معمولی به وب سایت کار ساده‌ای است. اما امروزه تمایل بیشتری به انیمیشن‌ها کاربر محور به نام میکرواینترکشن‌ها (microinteractions) وجود دارد، که از برنامه‌های تلفن همراه آغاز شده و راه خود را به سمت وب پیدا کرده‌اند.

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

با وجود یک مجموعه‌ی رو به رشد از اسکریپت‌های منبع باز شما به هر چیزی که نیاز دارید، دسترسی پیدا می‌کنید، CSS3 و جاوا اسکریپ هر دو دسترسی شما را به میکرواینتراکشن‌ها فراهم می‌کنند.

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

۱۲- نشان‌های برجسته

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

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

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

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

۱۳- طراحی شبکه‌های خلاقانه قطری و شیب‌دار

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

سایت قدیمی اِچ‌دی لایو ۲۰۱۲ از این تکنیک در بخش معرفی سخنرانان خود استفاده کرده‌است. طرح‌های لانه زنبوری شش‌ضلعی در بسیاری از سایت‌ها نیز قابل مشاهده است و بیشتر آن‌ها روند طراحی قطری را دنبال می‌کنند.

۱۴-انمیشن‌های تایپوگرافی

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

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

۱۵- پشتیبانی از صفحه نمایش بزرگ

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

پس همانطور که وب سایت شما برای گوشی‌های هوشمند طراحی می‌شوند، باید برای این نوع دسکتاپ‌ها نیز طراحی شوند. برخی سایت‌ها گسترده‌تر از عرض معمول ۱۴۴۰ پیکسل طراحی شده‌اند.

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

 

نظرتان را بنویسید

لطفا نام خود را وارد کنید.
لطفا نظرات خود را وارد کنید

لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
موارد ویژه
رنگ پوسته
امکانات طرح بندی
Layout patterns
تصاویر طرح جعبه
header topbar
header color
header position