روند طراحی وب سایت در سال 2013

 

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

 

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

 

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

 

نشانه های زمان در سال 2012

 

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

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

وضوح صفحه نمایش بسیار زیاد: iPad 3، و همچنین سایر دستگاه های تلفن همراه، منتشر شد و با این وضوح صفحه نمایش بسیار زیاد است.

بهبود HTML/CSS: بهبودهایی در ویژگی‌هایی مانند HTML5، CSS3 و فونت‌های ایمن وب در مرورگرها صورت گرفته است.

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

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

بنابراین، چه چیزی را می توانیم در سال 2013 ببینیم؟ حتما نظر خود را در نظرات به اشتراک بگذارید!

1. طراحی وب ریسپانسیو (RWD) به جریان اصلی تبدیل می شود

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

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

Boston Globe روزنامه‌ای است که می‌توان آن را برای هر اندازه صفحه تنظیم کرد که حمل آن را در جیب پشتی آسان‌تر می‌کند. 🙂

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

2. HTML5 و جاوا اسکریپت جایگزین فلش می شوند

تلاش برای تجربه کاربری غنی چیز جدیدی نیست. اصطلاح RIA (برنامه غنی از اینترنت) برای اولین بار در سال 2001 توسط Macromedia (در حال حاضر بخشی از Adobe) برای توصیف وب سایت های ساخته شده به طور کامل در Flash استفاده شد. در سال 2005، Adobe و Maromedia اعلام کردند که فلش قرار است پلتفرم انتشار چندرسانه ای برای همه دستگاه ها باشد. استیو جابز مخالفت کرد و اپل هرگز رسما از فلش پشتیبانی نکرد. امروز، استیو جابز از شنیدن اینکه فلش در حال مرگ است (یا شاید در حال حاضر مرده باشد) افتخار می کند.

بسیاری از طراحان وب با ظهور و سقوط وب سایت های ساخته شده با Adobe Flash زندگی کرده اند. اکنون باید به همین مسائل طراحی به روشی جدید برخورد کنیم – جایگزینی Flash با HTML5، CSS3، Javascript، Canvas و غیره.

می بینید که گوگل با سرمایه گذاری خود در کروم، آخرین فناوری ها را به کار می گیرد. Chrome واقعاً اینترنت را با سایت‌های فوق‌العاده‌ای مانند Chrome Experiments پیش می‌برد – باید این آزمایش‌ها را بررسی کنید! ما در 99designs نمی‌توانیم منتظر بمانیم تا ببینیم آینده وب‌سایت‌هایی که توسط این مرورگرها پشتیبانی می‌شوند چه خواهد بود.

راه خود را به اوز بیابید یک مثال عالی (از بین بسیاری از موارد) از Chrome Experiments است. برخی از آزمایش‌های Chrome مورد علاقه شما چیست؟

3. وب سایت ها یک تجربه سینمایی و داستان سرایی می دهند

 

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

Cadillac’s ATS vs. اگر فقط آنها این نوع سبک را در بقیه سایت خود گنجانده باشند.

نمونه دیگری از یک تجربه سینمایی را می توان در سایت آژانس دیجیتال Welikesmall یافت. اگرچه این سایت کارهای زیادی دارد، اما در استفاده از فونت های کوچک و عکس های چشم نواز کار خوبی انجام می دهد.

مشابه این تجربه سینمایی، وب سایت هایی را می بینیم که داستان سرایی را ادغام می کنند:

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

داستان سرایی بیشتری می خواهید؟ Impress A Penguin را ببینید که هوشمندانه از داستان سرایی برای پیدا کردن مدیر انجمن جدید برای شرکت خود استفاده می کند. یا سایتی که فیلم را تبلیغ می‌کند، رنگ پوست: عسل که بینندگان را به عنوان پسر جوان یونگ در وب‌سایت کاوش می‌کند – راهی عالی و تعاملی برای جلب علاقه هر تماشاگر سینما.

 

4. ناوبری های خلاق جایگزین ناوبری های سنتی می شوند

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

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

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

در اینجا نمونه هایی از ناوبری خلاقانه وجود دارد که ممکن است در سال 2013 بیشتر شاهد آنها باشیم:

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

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

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

 

5. وب سایت ها دارای جلوه های اختلاف منظر هستند

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

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

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

Zuelements نیز با این جلوه بازی می کند (اگرچه ظریف تر است).

 

6. طراحی های وب با الهام از سبک طراحی سوئیسی

 

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

اخیراً این سبک با انتشار رابط کاربری ویندوز 8 در نور جدیدی درخشیده است. این ایده استفاده از شبکه ها و تایپوگرافی مبتنی بر شبکه توجه بیشتری را به خود جلب می کند.

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

در اینجا نمونه های دیگری از وب سایت هایی وجود دارد که از سبک طراحی سوئیسی استفاده می کنند:

سایت Daniel Vane در پیاده‌سازی طرح‌بندی شبکه‌ای مربعی تمام صفحه، که محبوب‌تر می‌شوند، کار بسیار خوبی انجام می‌دهد.

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

نتیجه

 

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

شاید برخی از هیجان‌انگیزترین تغییرات، بهبود فناوری‌هایی مانند HTML5، CSS3، Javascript و موارد دیگر باشد. به این منابع نگاهی بیندازید تا در مورد چیزهای آینده ایده بگیرید:

 

• آزمایشات کروم
• کروم قناری
• Adobe و HTML
• Adobe و HTML: وب گرافیکی

 

بیشتر می خواهید؟ با روندهای بزرگ وب برای سال 2015، آینده را بیابید.