مزایای تایپوگرافی با کیفیت بارگذاری آسان صفحه

• ترجمه

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

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

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

1. WebGL (کتابخانه گرافیک وب)

یکی از آخرین دستاوردها، فناوری قابل توجه WebGL (کتابخانه گرافیک وب) است. بسیاری از سایت های شگفت انگیزی که اخیراً ایجاد شده اند از آن استفاده می کنند.

به عبارت ساده، WebGL راهی برای ارائه گرافیک های تعاملی سه بعدی و دو بعدی در مرورگرها با شتاب سخت افزاری، بدون هیچ گونه پلاگین است.

1.1 برنامه تعاملی 3D WebGL

تجربه کنجکاوی (ناسا)

WebGL یکی از موضوعات اصلی کنفرانس SIGGRAPH 2015 بود. ارائه در گرافیک سه بعدیو WebGL می توانید نگاه کنید در این کانالیوتیوب.

در این ویدئوی یک ساعت و نیم، با اپلیکیشن وب تجربه کنجکاوی ناسا آشنا خواهید شد که به مناسبت سومین سالگرد فرود مریخ نورد کنجکاوی در مریخ ساخته شده است. این اپلیکیشن به کاربران اجازه می‌دهد تا مریخ‌نورد سه‌بعدی ناسا را ​​بر روی سطح مریخ «سوار» کنند و یک بازوی روباتیک را «کنترل کنند».

برای ایجاد این منبع، از Blend4Web (فریم ورکی برای ایجاد برنامه های سه بعدی مبتنی بر مرورگر) و Blender (بسته ای برای مدل سازی و انیمیشن سه بعدی) استفاده کردیم.

وب سایت Beloola از three.js (یک کتابخانه جاوا اسکریپت) استفاده می کند.

پروژه "قایق" از تلویزیون SBS (استرالیا)

ایستگاه تلویزیونی استرالیا SSB TV داستان نویسنده Nam Le را با نام "قایق" در مورد فرار از ویتنام بازسازی کرده و آن را با استفاده از WebGL به یک داستان ویدئویی تعاملی تبدیل کرده است. این برنامه شامل چندین بخش با انیمیشن عالی و تصاویر دست رنگ است. این نیز مانند مثال قبلی از three.js استفاده می کند.

زیرا یادآوری

از نظر فنی یک انیمیشن دو بعدی پیوسته است که در فضای شبه سه بعدی اجرا می شود. بسیار چشمگیر به نظر می رسد!

2. VR (واقعیت مجازی)

واقعیت مجازی (VR) یک فناوری مرتبط است که این پتانسیل را دارد که دنیای گجت ها را در سال 2016 تکان دهد. شاید خیلی زود همه چیز جالب تر شود.

وب سایت timeshift165

برچسب ها: اضافه کردن برچسب

آلینا فیلاتوا

1394/07/16 | | 2 نظر

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

اگر در مورد مد مدرن وب صحبت کنیم، در سال های 2014-2015 چندین روند طراحی مد ظاهر شد که با گام های مطمئنی به سمت آینده حرکت می کند. اگر دوست دارید در اینترنت «مرور» کنید، احتمالا اخیراً به سایت‌های بیشتری برخورد کرده‌اید که از طراحی مسطح و نیمه مسطح (به اصطلاح «سبک مترو»)، تصاویر بزرگ و تایپوگرافی پیچیده استفاده می‌کنند. علاوه بر این، استفاده از ویدئو یا سینماگراف در وب سایت ها به وضوح در حال تبدیل شدن به جریان اصلی است.
بنابراین این فصل وب دقیقاً چه چیزی مد است؟

بنابراین، در 2015-2016 هنوز در روند:

1. تصاویر بزرگ و زیبا

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

2. طراحی تخت

   در پایان سال 2013 - آغاز سال 2014، عصر طراحی تخت، به اصطلاح "سبک مترو" آغاز شد.
   روندهای مد جدید در بازار توسط هیولاهایی مانند مایکروسافت و اپل تنظیم شد و همه شرکت کنندگان دیگر با خوشحالی آخرین روندها را انتخاب کردند. مد برای طراحی تخت در سال 2015 ادامه دارد. این طراحی تمیز و سبک به سایت ها اجازه می دهد تا بسیار مدرن به نظر برسند.

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

3. محتوای احساسی

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

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

4. بهترین تایپوگرافی

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

5. تصاویر و عکس های سفارشی؛ تصاویر کشیده شده با دست

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

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

6. ویدئو

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

   در سال 2015، ظرفیت بیشتر افزایش یافت. اکنون سرعت های افزایش یافته امکان استفاده بیشتر از ویدیو را فراهم می کند. هیچ کس شک ندارد که یک ویدیوی سه دقیقه ای کوتاه می تواند به طور کامل روح شرکت را منعکس کند و مشتری را "قلاب کند".

7. Cinemagraphs یا حلقه ویدیو

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

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

8. خالص

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

9. هدر ثابت

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

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

10. طراحی تطبیقی

    شاید بیشترین روند اصلیفصل طراحی پاسخگو است. مطابق با گوگلتعداد کاربرانی که از طریق اینترنت به اینترنت دسترسی دارند دستگاه های تلفن همراه، در پایان سال 2014 به 50٪ افزایش یافته بود!

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

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

اگر جلوتر از زمان نباشید، به ناچار عقب خواهید ماند.

به راهنمای گرایش های طراحی وب 2016 خوش آمدید!

همانطور که ما هر روند را توضیح می دهیم، توضیح خواهیم داد که چرا کار می کند و چگونه می توانید شخصاً بر آن مسلط شوید. همچنین بیش از 40 نمونه از وب سایت های شرکت هایی مانند Intercom، Google، Beoplay، Sennheiser و دیگران را ارائه خواهیم داد.

طرح بررسی ما به شرح زیر است:

1. معرفی

2. ریز فعل و انفعالات

4. طراحی مینیمالیستی

5. ترکیبی از طراحی مسطح و متریال

6. انیمیشن های شاداب

7. تایپوگرافی

8. رنگ های روشن

9. پیمایش طولانی

10. گرافیک HD

11. تصاویر

12. نتیجه گیری

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

ریز تعاملات

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

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

مزایای طراحی میکرو تعامل خوب

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

1. ایجاد عادت در بین کاربران.

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

• سیگنال (microinteraction) محرکی است که یک عمل را آغاز می کند.
• اقدامات تکراری - رویه ای که برای کاربر آشناست.
• پاداش نتیجه انجام یک عمل است.

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

2. طراحی برای استفاده مکرر.

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

3. کاری کنید که تریگرها یک طراحی بصری مشترک با رابط محصول داشته باشند.

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

4. از انیمیشن ها استفاده کنید.

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

5. از تعاملات ناخواسته خودداری کنید.

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

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

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

6. در نوشته های خود از طنز استفاده کنید.

تداخل‌های کوچک مانند دکمه‌های فراخوان یا سایر تبلیغات تعاملی (مثلاً صفحات خطای 404) در صورت تزریق شوخ طبعی مؤثرتر خواهند بود. حتی می توانید از ضبط صدای انسان در برخی مکان ها استفاده کنید.

کارت ها

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

4. در حال بارگذاری انیمیشن هاروشن کردن انتظار

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

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

تایپوگرافی

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

مزایای تایپوگرافی با کیفیت

• وضوح صفحه نمایش افزایش یافته فرصت های بیشتری را برای اجرای ایده های جالب چاپی فراهم می کند.
• توانایی تأکید بر منحصر به فرد بودن نام تجاری و قابل تشخیص بودن آن به دلیل فونت استفاده شده؛
• افزایش تأثیر محتوای متن؛
• ابزاری برای ایجاد یک سلسله مراتب بصری از عناصر، این به ویژه برای برجسته کردن ابزارهای CTA (تحرک به عمل) مهم است.

اصول استفاده

1. وضوح بسیار مهم است.

هرگز خوانایی را فدای فونت «بهتر» نکنید – اگر نتوانید آنچه را که می‌نویسید بخوانید، سبک‌های تایپوگرافی کار نمی‌کنند.

2. فونت ساده اما چشمگیر.

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

افزایش اندازه فونت؛

رنگ فونت را با پس زمینه اطراف آن متضاد کنید.

استفاده کنید فونت پررنگدر مکان های کلیدی

مفاهیم "چشمگیر" و "فلور" نباید اشتباه گرفته شوند. فونت های ساده به انتقال پیام با اطمینان و وضوح کمک می کنند.

3. فونت های پیچیده و ساده: Serif vs Sans Serif.

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

فونت های محبوب sans serif:

1. پروکسیما نوا
2. فوتورا
3. Avenir
4. Sans را باز کنید
5. هلوتیکا نو
6. فونت های سریف محبوب:
7. کاسلون
8. گاراموند
9. متن باربری
10. مینیون
11. FF Meta Serif

5. پوشاندن فونت های دست نویس.

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

6. متنی که فراتر از فضای تعیین شده است.

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

7. فونت های پیش فرض.

در بیشتر موارد، شما نباید بیش از دو خانواده فونت استفاده کنید. اگر می خواهید محتوای خود را متنوع کنید، اندازه و نوع فونت را در یک خانواده تغییر دهید.

رنگ های روشن

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

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

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

1. دوتون.

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

به همین ترتیب، همانطور که در مثال زیر نشان داده شده است، اغلب به عنوان پوشش عکس استفاده می شود.

2. روکش.

یکی دیگر از روند جالب استفاده از رنگ های روشن، پوشاندن آنها در عکس ها است.

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

3. شیب های دیدنی.

رنگ های مخلوط شده با یکدیگر با محو شدن تدریجی رنگ ها، انتخاب محبوب بسیاری از طراحان مدرن است. نیازی به مصرف بیش از 2 یا 3 رنگ برای مخلوط کردن نیست - این غیر ضروری است.

4. کلیدواژه ها و دکمه ها را برجسته کنید.

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

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

5. تغییر وضعیت یک عنصر هنگام نگه داشتن مکان نما.

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

6. از رنگ مناسب برای برانگیختن احساس مورد نظر استفاده کنید.

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

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

پیمایش طولانی

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

ویژگی های استفاده از اسکرول طولانی

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

1. از نشانه های بصری استفاده کنید.

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

2. صفحه نمایش ها مانند صفحات هستند.

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

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

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

3. منوی ناوبری چسبنده.

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

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

4. انیمیشن هایی که با اسکرول فعال می شوند.

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

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

5. معایب سئو صفحات پیمایش طولانی را کاهش دهید.

سایت هایی با اسکرول بی نهایت محدودیت هایی از نظر ارتقاء سئو دارند. اما آنها را می توان نرم کرد. نیل پاتل راهنمایی های مفیدی در مورد این موضوع ارائه می دهد.

گرافیک اچ دی

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

مزایای استفاده از گرافیک با کیفیت

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

1. عکس های استوک و سفارشی را با هم ترکیب کنید.

البته عکس‌های منحصربه‌فرد بهتر هستند، اما هر شرکتی توانایی استخدام عکاس را ندارد. به عنوان یک مصالحه، می توانید عکس های استوک و اصلی را به گونه ای ترکیب کنید که آنها را منحصر به فرد کند. عکس‌های استوک را با موضوع مورد نظر خود پیدا کنید، لوگوی خود را اضافه کنید، در صورت نیاز رنگ‌ها را تغییر دهید و کارتان تمام شد! اگر به دنبال موادی برای ایجاد تصاویر برندسازی هستید، می‌توانید از Unsplash، Pixabay یا Pexels دیدن کنید.

2. تصاویر با کیفیت بالا تهیه کنید.

تصاویر و ویدیوهای پس زمینه تمام صفحه فوراً توجه کاربران را به خود جلب می کنند و به عنوان ارائه عالی برای وب سایت های مینیمالیستی عمل می کنند.

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

3. گرافیک SVG یا شطرنجی؟

فرمت‌های گرافیک شطرنجی (jpg، .gif، .png.) دارای وضوح پیکسلی خاصی هستند، در حالی که گرافیک‌های اسکالر می‌توانند بدون از دست دادن کیفیت، رشد کنند یا کوچک شوند تا متناسب با صفحه نمایش باشند.

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

4. پس زمینه ویدئو در هدر.

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

بخش های ویدیویی 10-30 ثانیه ای تعادل خوبی بین محتوای جذاب و سرعت بارگذاری سریع صفحه ایجاد می کنند.

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

ویدیو از اولین ثانیه ورود کاربران به سایت را جذب می کند که دلیلی جدی برای استفاده از آن است.

تصاویر

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

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

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

1. تصویر را با موضوع کلی چیدمان هماهنگ کنید.

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

2. افکت های خلاقانه اضافه کنید.

تصاویر به طراحان آزادی بیشتری برای استفاده از جلوه‌های خلاقانه می‌دهند و این دو به ویژه محبوب هستند:

انیمیشن ها - آنها همیشه دست به دست هم داده اند.

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

3. از تصاویر در دستورالعمل ها و راهنماها استفاده کنید.

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

4. از طراحی تخت در تصاویر استفاده کنید.

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

نتیجه گیری

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

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

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

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

طرح‌بندی تطبیقی ​​و قالب‌های UI

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

طرح موزاییک

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

گرافیک به جای متن

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

پیمایش بی پایان

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

تعامل تعاملی

محتوای چند رسانه ای

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

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

طراحی وب چه چیزی را تغییر می دهد؟

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

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

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

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

اکثر ما اکنون از چندین دستگاه برای وب گردی استفاده می کنیم (مثلاً تبلت ها و لپ تاپ ها) و انتظار داریم یک وب سایت بدون توجه به دستگاهی که برای دسترسی به آن استفاده می شود، به درستی کار کند و عالی به نظر برسد.

طراحی وب تطبیقی ​​(Responsive Web Design; RWD)، که شامل بارگذاری کد HTML یکسان در هر دستگاه و استفاده از CSS برای تغییر است. ظاهرصفحات با در نظر گرفتن ویژگی‌های یک دستگاه خاص، یک فناوری رایج است که توسط Google برای استفاده در هنگام بهینه‌سازی وب‌سایت‌ها برای دستگاه‌های تلفن همراه توصیه می‌شود. به همین دلیل است که بسیاری از گرایش‌های فهرست زیر رویکردهایی را در طراحی وب نشان می‌دهند که مکمل RWD هستند.

لیست روندهای سال 2016 به شرح زیر است:

مینیمالیسم و ​​طراحی تخت 2.0

در سال 2015، مینیمالیسم تقاضای زیادی داشت. و در سال 2016 تقاضا برای این مفهوم ادامه خواهد داشت. این گزینه عالیبرای استفاده در ارتباط با RWD، زیرا از سردرگمی جلوگیری می کند، بر مهمترین عناصر تمرکز می کند و استفاده بهینه از فضا می کند. به عبارت دیگر: کمتر، بیشتر است.

یک رویکرد محبوب در طراحی وب که به خوبی با فلسفه مینیمالیسم مطابقت دارد، طراحی به اصطلاح تخت (معروف به طراحی تخت) است. در حال حاضر مرتبط ترین آخرین تجسم آن در قالب Flat 2.0 است.

ایده ای عالی از اصول Flat 2.0 ارائه می دهد طراحی متریال گوگل: بازتابی از دنیای مادی با بازی جالب سایه، نور و حرکت که نشانه های بصری را برای تعامل کاربران با یک وب سایت فراهم می کند.

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

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

سبک وینتیج مستقیماً از دهه 80

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

تجربه تعاملی و همهجانبه

مردم ذاتاً عاشق صحبت کردن و گوش دادن هستند. داستان های خوب. به لطف جادوی عنصر بوم HTML5، انیمیشن‌ها و انتقال‌های CSS3، APIهای جاوا اسکریپت مدرن (مانند WebGL و Greensock)، و قدرت شتاب سخت‌افزاری، داستان‌هایی که در سرتاسر وب گفته می‌شوند حتی فراگیرتر و تعاملی‌تر خواهند شد.

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

تصاویر و شمایل نگاری پر جنب و جوش، منحصر به فرد

ظهور نمایشگرهای با تراکم پیکسلی بالا نشان داده است که فرمت‌های تصویر استاندارد همیشه برای استفاده در آن مناسب نیستند اینترنت مدرن. استفاده از فایل‌های jpg و png می‌تواند منجر به پیکسل‌سازی در نمایشگرهای رتینا شود که زیبایی‌شناسی سایت را تخریب می‌کند.

این مشکل را می توان با استفاده از فرمت SVG (Scalable Vector Graphics) که توسط مرورگرهای مدرن پشتیبانی می شود و فونت هایی که به راحتی با آیکون ها پیاده سازی می شوند، حل کرد. با استفاده از این عناصر، می‌توانید انتظار داشته باشید که در آینده نزدیک راه‌حل‌های طراحی وب بیشتری را بر اساس تصاویر رنگارنگ، منحصربه‌فرد، فونت‌های آیکون با دست طراحی شده شیک، و نمادهای SVG مشاهده کنید که در هر وضوح صفحه‌ای واضح و زیبا باقی می‌مانند.

فونت ها بیانیه می دهند

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

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

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

تصاویری با وضوح بالا

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

افزایش پشتیبانی مرورگر از ویژگی پس‌زمینه-blend-mode از CSS3 می‌تواند منجر به تکثیر جلوه‌های هنری بسیار جالب در تصاویری شود که مستقیماً در مرورگر با چند خط کد CSS ایجاد می‌شوند.

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

طرح‌بندی‌های مبتنی بر شبکه انعطاف‌پذیرتر

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

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

به جای نتیجه گیری

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