با پیشرفت عواملی چون مرورگرها و پشتیبانی از قابلیتها و تکنولوژیهای جدید طراحی وب٬ افزایش سرعت اینترنت و حرکت به سوی جلوههای دیداری بیشتر در طرحها این روزها موارد خلاق زیادی از طراحی صفحات وب با بکگراندهای تمام صفحهای که یک عکس زیبا و مناسب با طرح و رنگبندی کلی سایت که کمی حالت Blur یا مات را به خود گرفته است را مشاهده میکنیم.
در اینگونه وبسایتها جا برای تزریق خلاقیت و کار کردن روی جلوههای دیداری زیاد وجود دارد و میتوان طرحهایی نفسگیر را به کمک این متد خلق کرد.
در این پست میخواهیم نمونههایی خلاقانه از اینگونه طرحها را معرفی کنیم تا بیشتر با طراحیهای مختلف با این سبک آشنا شویم.
http://paris.3ds.com/en-index.html#Heritage
http://www.tinyfactory.co/#!home
https://spacebox.io/
http://www.humaan.com.au/
https://squareup.com/
http://www.cageapp.com
http://instafoc.us/
http://www.meernotes.com/
http://ideakites.com/
http://www.happytables.com/
https://do.com/
http://www.nvinteractive.co.nz
http://www.designedtomove.org
حتی این موج و Trend هم به وب فارسی رسیده و وبسایتهای جالبی با این تکنیک راهاندازی شده است. اگر شما هم وبسایتی که با این متد طراحی شده دارید یا میشناسید لطفا برای ما بفرستید.
http://www.baaemail.com
http://www.yadaavar.com/
http://www.yadambiar.ir/
http://www.podcaster.ir/
http://www.comva.me/
http://wonderfulglasses.com/launch/
آپدیت یکم : با تشکر از دوستان که برای ما کارهای بیشتری را ارسال کردند تعدادی از اینگونه نمونه کارهای فارسی به پست افزوده شد.
امیر حافظی
۱۲ آذر ۱۳۹۱
ممنون از وب سایت خوبتون
وب سایت من (کرل دیزاین) هم هست ولی خب بگراندش بلور نیست:
http://www.coreldesign.com
big man
۱۲ آذر ۱۳۹۱
درود
پست پر محتوایی بود و یاعث آشنایی طراحان وب میشه! ادامه بدین ، موفق باشید.
من دنبال دکمه + Google بودم ولی پیدا نکردم ! :(
علی طبیب زاده
۱۳ آذر ۱۳۹۱
سلام.
ممنون از بازخورد گرم شما.
در آیندهای بسیار نزدیک این امکان را برای شما همراهان وبتارگت فراهم میکنیم.
موفق و پیروز باشید :)
مهدخت
۱۲ آذر ۱۳۹۱
خیلی جالب بود مخصوصا نمونه های ایرانیش :)
علی اقدم
۱۳ آذر ۱۳۹۱
به به بسیار زیبا
علی و امیر آخرشم وای نسادین من ریدیزاین کنم ماله منم بیاد تو لیست :دی
علی طبیب زاده
۱۳ آذر ۱۳۹۱
ایشالا سایت شما نه تنها در این قسمت و دسته بندی در قسمت های دیگه هم جای خودش را پیدا میکنه علی جان ;-)
حسین
۱۳ آذر ۱۳۹۱
سلام من منظورتون را از این مقاله متوجه نمیشم درسته که مرورگر ها پیشرفته اند ولی این ویژگی سالها قبل قابل انجام بود من چند تا از این سایتها را چک کردم همشون از عکسی که قبلا در PhotoShop ساخته شده بود استفاده میکنند و خود عکس Blur هستند و این اصلا چیز جدیدی نیست و در ۱۹۹۸ هم میشد از این تکنیک استفاده کرد الان یک دستور CSS3 برای مرورگر های Webkit-Based اومده و اون اینه:-(webkit-filter: blur(2px که شما با استفاده از اون میتونید هر عکسی را که مات نیست را هم مات نشون بدین این مربوط میشه به پیشرفت مرورگر ها نه این مقاله که نوشتین این چیزی که شما میفرمایید را ۱۲ سال پیش هم می شد پیاده کرد و اصلا تعجبی نداره ممون
علی طبیب زاده
۱۳ آذر ۱۳۹۱
سلام.
صحبت در مورد این عوامل از دیدگاه پشتیبانی مرورگرهای مختلف و از آن مهمتر «نحوه پشتیبانی» آن مرورگرها از این تکنولوژی است و قرار دادن یک بکگراند بزرگ با یک سایز «ثابت» چیزی نبود که ما در ذهن داشتیم. همینطور پیشرفت بستر و زیرساخت اینترنتی و ارتباطی در ۲ یا ۳ سال اخیر همراه با فراگیرتر شدن سیاساس۳ به ما کمک میکند که با اطمینان خاطر بیشتری از این امکان استفاده کنیم.
شاد و پیروز باشید :)
آرمین جلیلی
۱۳ آذر ۱۳۹۱
سبک جدید و جالبی هست، این دو سایت زیر از قلم افتادن:
http://www.comva.me/
http://www.podcaster.ir/
علی طبیب زاده
۱۳ آذر ۱۳۹۱
بله موافقم با شما٬ کارهای زیادی میشود با این متد انجام داد و از همه جالبتر به نظر من میتوان پیغامهای زیادی فرستاد و با مخاطب ارتباط بهتری برقرار کرد.
ممنون از لینکهای شما.
حسین
۱۴ آذر ۱۳۹۱
سلام اولا که استفاده از بک گراند بزرگ ربطی به پیشرفت تکنولوژی در دو سه سال اخیر نداره
ثانیا CSS3 در حال توسعه است و قراره در ۲۰۱۴ تکمیل بشه
ثالثا همون طور که عرض کردم این بک گراند هایی که نشون دادین همه عکس هستند که قبلا Blur شدند و همونطور که گفتم یک دستور CSS3 وجود داره که عکس ها واضح را Blurring میکنه و این شکل مطلوب هست یعنی شما یک بک گراند واضح را استفاده میکنید و به راحتی با دستور CSS3 این بک گراند یا هر عکسی را Blur میکنید همین و این یعنی تکنولوژی
به نظر من مقاله شما بیشتر یک ایده زیبا از لحاظ Design معرفی میکنه نه یک تکنولوژی این مطلب را هم برای این مینویسم که چند وقت پیش با یکی از دوستان طراح به مشکل برخوردم علتش هم عدم اطلاع ایشون از تکنولوژی های وب بود مثلا ایراد میگرفت چرا فلان چیز این ور تره در صورتی که اگر ایشون با CSS آشنایی داشت می فهمید که کمتر از ۳ ثانیه بیشتر وقت نمیگیره ولی فکر کرده که بوم نقاشی و دیگه اگر فلان المان این ور تره باید همه چیز را پاره کرد!
خوبه که سایت شما این مشکل تاریخی اختلاف بین هنرمند ها و کدنویس ها را با آموزش حل کنه اگر کسی دنبال CSS3 BLUR EFFECT هست به این لینک ها سری بزنید البته هنوز این تکنولوژی به صورت کامل برای همه مرورگر ها اعمال نشده (این کار را با هر عکس میشه انجام داد)
http://css3playground.com/blur-filter.php
http://css-plus.com/2012/03/gaussian-blur
علی طبیب زاده
۱۴ آذر ۱۳۹۱
دوست عزیز ما صرفا تکنیک مات کردن توسط سیاساس۳ را نگفتیم و در حالت کلیتر این نوع طراحی که جدیدا ترند هم شده است را مد نظر داشتیم. و صد البته راه برای انجام این کار زیاد است.
علی حدادکار
۱۷ آذر ۱۳۹۱
درود
تا حالا با نمونه های ایرانی اینجور طرح ها برخورد نداشتم واقعا جالب بود.
Hesam
۲۲ آذر ۱۳۹۱
توییترم فراموش کردید :)
داوود
۲۸ آذر ۱۳۹۱
سلام
اینم یک سایت دیگه : wikishahr.com
امیر حافظی
۱۳ اسفند ۱۳۹۱
این هم یک سایت دیگه :
http://www.hod.ir
امیر اخوان
۲۰ اسفند ۱۳۹۱
مرسی از مطلب مفیدتون.
صفحه اول پنل جدید مشترکین سایت مبین نت هم همینجوری هست :)
حمیدرضا محمدیان
۲۴ اسفند ۱۳۹۱
سلام .
این هم میتونه یه نمونه باشه:
http://www.linkhaa.com
Diplo
۳ بهمن ۱۳۹۵
عالی! ممنونم از وقتی که میزارید