20 روند داغ طراحی وب در 2013

9967 بار
یکشنبه, 28 مهر 1392 ساعت 21:31
ارزیابی شما
(8 رای)
20 روند داغ طراحی وب در 2013 - 4.6 out of 5 based on 8 votes

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

  1. لایه های پاسخگو
    شما می توانید یک وب سایت پاسخگو و رسپانسیو داشته باشید که تصاویر و گرافیک های زیبا نیز در لی اوت خود برای صفحات نمایش بزرگتر دارد. کد های CSS3 به توسعه دهندگان و طراحان وب اجازه می دهد لی اوت ها را بر اساس اسکرین های محدود شده یا توسعه یافته شخصی سازی کنند، از این روش به نفع خود استفاده کرده و ببینید چطور سایر طراحان از آن استفاده می کنند.
    شا می توانید این روند را به عنوان طراحی وب یونیفورم در نظر بگیرید که در آن هدف داشتن یک نوع دسته از کدهاست که الزاماً در هر محیطی با هر نوع صفحه نمایشی اجرا می شود. وب سایت های پاسخگو معمولاً برای کاربران موبایل ساخته می شوند، اما این تنها هدف نیست. 
    طراحی پاسخگو و رسپانسیو
    این موضوع اولین مسئله در روندهای سال 2012 بود، البته به نظر من طراحی پاسخگو تغییرات زیادی را پشت سر گذاشته و به آستانه ای رسیده است که در ان لی اوت ها برای همخوانی با تمام رسانه های و دستگاه های دیجیتال طراحی می شوند. ایده نهایی این نوع طراحی پشتیبانی از تمام دستگاه ها از لپ تاپ گرفته تا سیستم های دسکتاپ رومیزی، تلفن و موبایل های هوشمند، تبلت و هر نوع وسیله دیگر در آینده است.
  2. پشتیبانی از رتینا (Retina.js)
    علاوه بر پشتیبانی طراحی پاسخگو از لی اوت های وب سایت، افزایش قابل توجهی در افرادی دیده ایم که از دستگاه های رتینا استفاده می کنند. اپل اولین بار این ایده را در آی فون 4 بکار برد و از آن به بعد در دستگاه های دیگر مثل آی پد و مک بوک نیز این تجهیزات به کار رفته اند. اسکرین های رتینا اساساً دو برابر چگالی هر LCD را دارند. آنها با پیکسل های فیزیکی برابر هستند اما از نظر دیجیتال دو برابر پیکسل در همان فضا جا می گیرد.
    این به معنای این است که در این سیستم ها شما باید دو دسته عکس بسازید. اول شما باید نمونه ای از عکس خود را در دو رزولوشن طراحی کرده و سپس مدل استاندارد با اندازه نصف آن ذخیره کنید.عکس بزرگتر به رزولوشون استاندارد تبدیل می شود.
     رتینا
    یکی از ابزار محبوب من برای طراحی وب پاسخگو Retina.js است. این فهرست جاواسکریپت برای نمایش خودکار کپی های رتینای @2x در زمان مرور کردن با استفاده از دستگاه های رتینا طراحی شده است.
    اگرچه این ابزار عکس پس زمینه CSS را تشخیص نمی دهد، اما باز هم منبع مفیدی محسوب می شود.
  3. هدر بار ثابت
    استفاده کردن از ;position: fixed در CSS، روشی مناسب برای ثابت کردن هدر بار در وب سایت است. وقتی بازدیدکننده در صفحه اسکرول می کند، سیستم گشت زنی سایت ثابت مانده و راحت می توان به صفحه اصلی بازگشت. این روند مدت هاست که جریان دارد اما امروزه با قدرت تمام خودنمایی می کند. هدرهای ثابت بسیار جذاب هستند زیرا می توانند در سایت بسیار عملی باشند.
    هدربار ثابت در بالای صفحه
    طراحی این هدرهای ثابت بسیار جذاب بوده و در اکثر لی اوت ها قابل اجراست. اما علاوه بر جنبه های زیبایی، این نوع هدرها باعث ایجاد تجربه کاربری ویژه یا همان UXمی شوند زیرا دیگر کاربر نیاز نیست برای گشت زدن در سایت، صفحه را دوباره با اسکرول پیمایش کند.
  4. عکس های پس زمینه بزرگ
    عکاسان و حتی طرفداران عکاسی احتمالاً از این روند طراحی لذت زیادی می برند. من موارد زیادی را دیده ام که در آنها تصویری بزرگ در پس زمینه قرار داده شده است. این روشی عالی برای جلب توجه بازدیدکنندگان بوده و اگر به طور صحیح انجام شود، بسیار زیبا نیز خواهد بود.
    بکگراند بزرگ در پشت صفحه وب
    من معمولاً عاشق عکس های بزرگ هستم، زیرا می توانند بسیار زیبا باشند. وقتی عکس زیبا در لی اوت ترکیب شود، این روش طراحی می تواند باعث تمایز شما در بازار شود. در مثال زیر پورت فولیوی طراحی کرم سوئر نشان داده شده است. این عکس پس زمینه خاص به عنوان برندینگ برای هرکسی عمل می کند که به سایت او وارد می شود.
  5. درصد شفافیت با CSS
    ویژگیهای جدید CSS3 اجازه می دهد که شما عناصر هر صفحه وب را دستکاری کنید. این یعنی شما می توانید شفافیت را در مرورگرهای مدرن وب ایجاد کنید و هیچ نیازی به فتوشاپ نیست! در تصویر زیر رپر مرکزی کد background: transparent property دارد. معمولاً این کد برای ایجاد نوعی پس زمینه دیگر یا برای تنظیم کردن پس زمینه با استفاده از عناصر درونی استفاده می شود.
    درصد شفافیت عناصر صفحه با CSS3
    یکی دیگر از روش های جالب برای دستکاری کردن شفافیت از طریق سینتاکس رنگ rgb است. در زمان طراحی CSS شما می توانید رنگ ها را با استفاده از مشخص کردن رنگ های قرمز، سبز، آبی و آلفا-ترانسپرنسی انتخاب کنید. پس شما می توانید با استفاده از ترتیب رنگ rgba(255,255,255,0.6) رنگ سفید با ظرفیت تنها 60 درصد تولید کنید. این مطمئناً روند طراحی است که تا سال 2013 و آینده ادامه خواهد داشت.
  6. لندینگ پیج های مینیمال
    هر کسی که مدت زمانی را صرف تحقیق کردن بر بازار کرده باشد، درک می کند که فروش در اینترنت تنها به هوشمند بودن مربوط می شود. شما به حجم بزرگی از مشتریان در سرتاسر جهان دسترسی دارید. به علاوه شما می توانید محصولاتی را بفروشید که حتی جنبه فیزیکی ندارند، مثل فیلم یا منابع خلاقانه و یا قالب سایت.
    لندینگ پیج های مینیمال
    ساخت یک صفحه لندینگ آنلاین، نیز یعنی کسب سرنخ های فروش جدید برای محصولات یا خدمات شما. روند جدید در این مورد، استفاده کردن از طراحی مینیمال است. در این تفکر همه چیز ساده بوده و بر محصول مرکزی تمرکز می شود. نمونه زیر از صفحه PictoPro است که منبعی عالی برای آیکن های ارزان قیمت است. این لندینگ پیج با استفاده از نمادهای پیکان بسیار مناسب بوده و بکگراند نیز تأثیر قابل توجهی دارد. اما تمام متن ها به راحتی قابل خواندن بوده و اساساً فرآیند خرید محصول با یک بار کلیک کردن انجام می شود. شما نمی توانید کار را دیگر از این ساده تر کنید.
  7. کدهای QR دیجیتال
    افزایش تلفن های هوشمند باعث بوجود آمدن برنامه های کد QR شده است. QR به معنای کدهای پاسخ سریع (Quick Response) بوده و مدل جدید بارکدهای UPC محسوب می شود. شما این تگ ها را در هر جایی از رستوران گرفته تا تجارت ها و مراکز فروش اتومبیل مشاهده می کنید. اما اخیرًا من وب سایت هایی را پیدا کرده ام که از این کد برای کپی رایت طراحی خود استفاده کرده اند.
    کدهای QR
    این مسئله چیزی نیست که معمولاً در نظر بگیرند، زیرا کدها معمولا به صورت پرینت شده هستند. اما کدهای QR می توانند به یک روند تبدیل شوند زیرا انتقال داده بسیار سریع تر خواهد شد.شما می توانید مثالی عالی از این تکنیک را در صفحه تماس طراحی سایت شرکت پوشش گستر قشم مشاهده کنید.
  8. نشان های رسانه های اجتماعی
    بازاریابی یکی از عوامل نهایی مشخص کننده در موفقیت یا شکست یک وب سایت است. رسانه های اجتماعی و بازاریابی ویروسی در وب سایت های زیادی غوغا به پا کرده اند. Digg در این حیطه قدرت زیادی داشت اما رقبایی مثل Reddit در کنار او فعالیت می کنند. اما این ها تنها منابع محبوب برای اشتراک گذاری داستان های آنلاین محسوب نمی شوند.
    نشان های شبکه های اجتماعی
    شما می توانید هر جامعه اجتماعی را چک کرده و ببینید چه نشان هایی دارند. این مسئله به شما راه حل های عالی نشان خواهد داد. شما می توانید این نشان ها را به مقالات بلاگ خود و مقالاتی که در جاهای دیگر نوشته اید، متصل کنید. این نشان ها به کاربران اجازه می دهد ، محتوای شما را سریعاً در سایت هایی مثل فیس بوک، تویتر و حتی لینکداین منتشر کنند.
  9. تصاویر دارای جزئیات با Illustrations
    روندهای جدید طراحی به جلب توجه و حفظ افراد در صفحه توجه می کنند. من فکر می کنم که تصاویر، به خوبی چنین کاری انجام می دهند. مشکل پیدا کردن طراحی است که بتوانید چنین هنری را خلق کرده یا بتواند چنین چیزی را به شما آموزش دهد. تصاویر را می تواند به روش های متفاوتی استفاده کرده و حالت های متفاوت به وب سایت داد. در اینترنت کمی بررسی کرده و گالری های متفاوتی را می بینید که بر عکس های دیجیتال تمرکز دارند. شما می توانید ببینید که این کارهای هنرمندانه در نهایت بدون هیچ نقصی در برندینگ وب سایت ترکیب می شوند. MailChimp احتمالا بهترین نمونه برای این موضوع است با آن کارکتر میمون.
    خلق تصاویر زیبای گرافیکی
  10. اسکرولینگ نا محدود
    لودینگ اسکرول نامحدود سالهاست که اختراع شده است. اما تا سال قبل نتوانسته بود محبوبیت زیادی داشته باشد، اما به نظرم در سال 2013 محبوب شده است. پین ترست از این روش لودینگ برای لی اوت استفاده کرده و واقعاً نتیجه خوبی داشته است. شما می توانید هر چیزی را جست و جو کرده و صفحه نتیجه به طور مداوم با اسکرول کردن لود می شود. ترتیب صفحات در این روش یک مشکل محسوب نشده و حتی می تواند تجربه خوبی برای کاربر به همراه داشته باشد. بازهم مسئله طراحی های ساده و مینیمال پیش می آید!
    اسکرول نامحدود صفحه
    اما یک نمونه عالی دیگر و احتمالا نمونه محبوب من Tumblr است. شما می توانید عکس ها را بلاگ نویسی کرده و افراد نیز شما را با استفاده از عکس هایی که در دشبورد شما ظاهر می شود، دنبال کنند. در این سایت، بعد از وارد شدن در اکانت، تمامی مقالات قبلی شما به صورت اسکرول نامحدود لود می شوند. این روشی عالی است که در هر لی اوتی قابل اجرا نیست، اما برای وب سایت های خوب می تواند بسیار موثر باشد.
  11. صفحات اصلی دارای تور
    اسلاید عکس و فیلم های دمو هر دو برای ارائه محصولات جدید در اینترنت رایج هستند. صفحات لندینگ و استارت آپ ها نیز معمولاً تلاش می کنند کاربران احتمالی را با استفاده از این اطلاعات مفید به خود جذب کنند. و این روش ها نیز معمولاً نتیجه خوبی دارند، البته اگر شما بدانید چطور چیزی بسازید که ظاهر خوبی در اینترنت داشته باشد.
    صفحات اصلی دارای صفحه
    با نگاه کردن به سال 2012، می توانم بیان کنم که نمونه های محبوب من از این روند MediaFire است. کل بخش بالای صفحه با یک سری از اسلایدها پر شده است. هر کدام از اسلایدها، توضیح می دهند شما می توانید چه کاری در این سایت انجام داده و خصوصیاتش را با سایت های دیگر مقایسه می کنند.
    چیزی که باعث تمایز این شکل می شود، استفاده آنها از نمادها و گرافیک های بزرگ است. این یکی دیگر از روندهایی است که در تمام وب سایت ها عملی نیست. شما تنها برای محصولاتی خاص می توانید توجه زیادی را جلب کنید.
  12. پنل های اسلاید صفحات وب
    وب سایت های دینامیک با استفاده از Action Script و فلش در گذشته بسیار محبوب بودند. امروزه، تأثیرات دینامیک به حیطه jQuery و جاوا اسکریپت انتقال پیدا کرده است و این می تواند بر نحوه طراحی وب سایت ها تأثیر بگذارد. پنل های اسلایدنینگ می تواند یکی از تکنیک هایی باشد که من بسیار از آنها لذت می برم و در سال 2013 مشاهده شدند.
    پنل اسلایدهای صفحات وب
    CaptainDash یکی از نمونه هاست که فکر نکنید وب سایتی خاص است. اما وقتی در سایت گردش می کنید، می فهمید که هر صفحه از راست به چپ لودمی شود. افکت های دینامیک مثل این همیشه برای کاربران موبایل مناسب نیستند. اما اگر از روش های طراحی پاسخ گو یا سایت جداگانه برای موبایل استفاده کنید، این افکت بسیار جذاب خواهد بود.
  13. منوی باز و بسته شونده برای موبایل
    وقتی از طراحی پاسخگو حرف می زنیم، یکی از سخت ترین سوالات، نحوه ایجاد یک سیستم ناویگیشن مناسب است. شما می خواهید، خوانندگان دسترسی مستقیم به تمام لینکهای شما داشته و سیل صفحات باز شده باعث آزار آنها نشود. همین طور شما بهتر است ناویگیشن پاسخگو را تا زمان نیاز، مخفی نگه دارید. به این مثال عالی و زیبا برای منوهای ناویگیشن موبایل توجه کنید. بلاگ Treehouse یکی از نمونه های عالی این روش است که در تلفن های هوشمند، جلوه ای بسیار زیبا دارد. جالب این جاست که این سایت در مرورگر کامپیوترهای شخصی نیز بسیار زیباست! اما تعداد زیادی وب سایت و استودیو طراحی وجود دارند که از این روند برای لی اوت پاسخگوی خود استفاده کرده اند.
    منوی باز و بسته شونده موبایل
    چیزی که من در مورد این روند از همه بیشتر دوست دارم، این است که شما می توانید منوها را به اشکال بسیار متفاوتی طراحی کنید. شما می توانید لینک ها را به صورت دراپ داون از بالا، یا اسلاید داون طراحی کرده یا محتوا را در بالا و یا راست لینک مشخص کنید. طراحان انتخاب های زیادی داشته و فضای زیادی برای امتحان کردن UI وجود دارد.
  14. تایپوگرافی تمام اسکرین
    در ابتدای مقاله گفتم که استفاده عکس های بزرگ در پس زمینه لی اوت از روندهای محبوب است. این روند را می توان توسعه داده و بر تایپوگرافی نیز تمرکز کر: شما متن وب سایت خود را طوری تنظیم می کنید که کل مرورگر را بپوشاند.بعضی از کاربران از این مسئله خوششان نمی آید، اما اگر لی اوت به درستی برای متن های بسیار بزرگ فیت شده باشد، چنین چیزی رخ نمی دهد.
    وب تایپوگرافی
    Alex Pierce یک لی اوت وب سایت عالی دارد که در آن بر تایپوگرافی تمرکز شده است. شما می توانید ببینید این افکت های تکست چطور با CSS3 ایجاد شده اند. به علاوه، وب سایت بسیار راحت ناویگیت می شود و بسیاری از عناصر صفحه نیز بزرگ نشان داده می شوند.
    تکست های بزرگ با فونت های خاص نیز مثل تایپوگرافی بزرگ جلوه می کنند. و من مطمئن هستم که این روند در سال جدید ادامه خواهد داشت، اما متاسفانه به دلیل کمبود فونت ها در زبان پارسی در حال حاضر وب تایپوگرافی در ایران و وب ایرانی با مشکلاتی روبروست که امیدواریم به زودی برطرف گردد و فونت های جدید پارسی پا به عرصه وب بگذارند.
  15. API های و اوپن سورس
    نرم افزارهای اوپن سورس دهه هاست که بوجود آمده اند و همیشه در حال تغییر دادن وب بوده اند. اما در سال 2012، من نرم افزار های اوپن سورس بیشتری را دیدم که در لی اوت ها، صفحات وب، ویجت ها و افکت های دینامیک وارد شده بودند. معمولاً ما در مورد تمپیلت ها، لی اوت ها و یا نرم افزارهای CMS مثل وردپرس و جوملا صحبت می کنیم.
    API های اپن سورس
    API های کدباز و منابعی مثل Github به طراحان اجازه می دهد لی اوت های آزمایشی ساخته و انیمیشن و افکت ها را در صفحه خود امتحان کنند. jQuery عملاً در تعداد بیشماری از پلاگین های مجانی دیده می شود.
    و من صادقانه انتظار نداشتم که این میزان پروژه اوپن سورس، در زمان های نزدیک به دنیای وب وارد شوند. امروزه واقعاً عالی ترین عصر برای شروع کار و حمایت از دانش شما در ساخت وبلاگ است.
  16. سایه های جعبه ای عمیق (box Shadow)
    من حالا بیشتر از همیشه انتظار دارم که این نوع سایه ها را در عناصر طراحی وب مدرن مشاهده کنم. افکت ها بسیار جذاب بوده و به ندرت از جنبه های زیبایی کاهش می دهند، مگر اینکه در استفاده از آنها افراط شود. من باور دارم که یکی از مشکلاتی که طراحان باید سالهای پیش با آنها روبرو می شدند، سختی در اجرای این نوع سایه ها بود. چند سال پیش، این افکت به نوعی جاوا اسکریپت یا پس زمینه مستقیم نیاز داشت که باید در فتوشاپ ساخته می شد. امروزه این نوع سایه را می توان با چند خط ساده در CSS3 نوشت. من در سال 2013، به دنبال انواع جدید این نوع سایه ها هستم. من فکر می کنم که این روند در حال حاضر نیز بسیار غنی شده و در جامعه طراحان رواج پیدا کرده است. حال سوال این جاست که چه کسی خلاق تر خواهد بود!
    ایجاد سایه با CSS3
  17. انیمیشن های CSS3
    خصوصیت transition CSS3 و تمام پره فیکس هایی که برای مرورگرهای متفاوت در CSS اجرا می شود باعث می شود بتوان با آن افکت هایی مثل جاوااسکریپت ساخت. طراحان حالا می توانند افکت های متحرک را با استفاده از مشخصات متفاوت CSS در صفحه قرار دهند. من افکت های هاور و فرم های ورودی را دیده ام که از این خصوصیت CSS بهره برده اند. این مطمئناً روندی است که نتایج خوبی را در ماه های آینده ارائه می کند و فضای زیادی برای پیشرفت دارد. من مطمئن هستم که طراحان وب باعث شکوفاتر شدن انیمیشن بدون استفاده از اسکریپت خواهند شد.
    ایجاد انیمیشن با CSS3
  18. ناویگیشن عمودی
    من وقتی اولین بار با این روند روبرو شدم، از طرفداران آن نبودم. اما طی سالهای گذشته، من مشاهده کرده ام که طراحان به خوبی از این راه حل استفاده کرده اند و به ریتم سایت هیچ صدمه ای نخورده است و وقتی این کار به درستی انجام شود، ناویگیشن عمودی می تواند به یک جریان دلپذیر در محتوا و طراحی تبدیل شود.
    منوی افقی در صفحات
    پورت فولیوی Riot Industries نمونه ای عالی از طراحی های جدید وب است. ببینید چطور لینک های ناویگیشن کار کرده و چطور پورت فولیو افکت هاور پیدا کرده است. همین طور بافت بوردر ها واقعاً یک ط تقسیم کننده بین ستون ها را نشان می دهند.
  19. طراحی وب تک صفحه ای
    طرحی وب تک صفحه ای، موضوعی بزرگ بوده و طی دسته بندیهای متفاوتی پوشش داده شده است. مشخص است که طراحی تک صفحه ای از شروع کار اینترنت جهانی وجود داشته است، اما طی سالهای گذشته ما شاهد تحول این روند بوده و دیده ایم که باعث بهبود تجربه کاربری شده است. من فکر می کنم طراحی سایت Cage App احتمالاً یکی از بهترین نمونه روندهایی است که در این مقاله بیان شد.
    طراحی وب تک صفحه ای
  20. آنها از لی اوت تک صفحه ای به بهترین نحو استفاده کره اند و محتوا توسط بلاک های افقی جدا شده است. اما شما هنوز می توانید بالای هر صفحه و عکس پس زمینه با افکت را به خوبی مشاهده کنید. به علاوه وقتی صفحه را به پایین اسکرول می کنید، خط ناویگیشن واقعاً در بالای پنجره شما ثابت می ماند. ترکیب کردن سایر روندهای محبوب طراحی در این لی اوت تک صفحه ای نیز یکی دیگر از راه حل های جلب توجه بازدید کنندگان و جذب کردن آنهاست.
  21. عناصر طراحی دایره ای
    روند دایره ها در لی اوت وب سایت چیزی جدید بوده و اخیراً توجه زیادی را جلب کرده است. طراحان از دایره ها خوششان می آید، زیرا آنها تمیز و ظریف بوده و عموما در هر بلوک لی اوتی جا می شوند. شما می تواند با آنها الگو تشکیل داده و حتی عناصر صفحه را در طراحی دایره ای (مثل آواتار کاربر، کلیدهای اشتراک گذاری و تاریخ پست ها و غیره) جا دهید. پورت فولیوی Lucia Soto اساس یک نمونه عالی از طراحی وب دایره ای است. وب سایت به طور دینامیک ساخته شده است تا شما بتوانید به طور افقی به بخش های متفاوت سایت وارد شوید. شما توجه می کنید که چطور آرت ورک های پیکان در امتداد خطوط کناری نقطه گذاری شده است. طراحان وب عاشق این ریزه کاری ها در لی اوت هستند زیرا باعث خاص شدن صفحه می شوند.
    استفاده از عناصر دایره ای
    شما می توانید نمونه های مشابه در صفحه اصلی Site Optimizer ببینید که از عناصر دایره ای صفحه به عنوان نقطه آگاهی دهنده فروش خدمات خود استفاده کرده است.

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

اگر شما در مورد این مطلب نظری دارید در اینجا بنویسید

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

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