گرافیک در طراحی سایت: ایجاد بافت

گرافیک در طراحی سایت: ایجاد بافت

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

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

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

1-شیوه کهنه، فرسوده، مستعمل و غمناک

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

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

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

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

2-شیوه کارتونی خیال انگیز

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

سایت Yes Insurance وسط Technophobia،یک آژانس برنامه نویسی اینترنتی مستقر در Sheffeld واقع در South Yorkshire، طراحی شده است. این سایت به عنوان پس زمینه از یک منظره کارتونی خیالی استفاده کرده است. گرافیک های ساده این صفحه نشان می دهند که چگونه می توان از شکل های مسطح برای ایجاد تصویری با عمق و حجم استفاده کرد. بلوک های محتوا و منوی سایت در دو لایه از جهبه های سفید شفاف که از بالا و پایین گرد شده قرار دارند.این شکل های مدور با رنگ های روشن به مرتبط کردن مضمون کودکانه با محتوا کمک می کنند و موضوع بیمه را که معمولا موضوعی نا خوشایند است، ساده تر می کنند.

3-شیوه براق و بزرگ Web2.0

شاید شما به شیوه شرور و مستعمل یا کارتونی خیال انگیز علاقه ندارید.در این صورت ممکن است خواهان استفاده از از منظره Web2.0 باشید.Time O’Reilly   در سال 2004 این اصطلاح را رسما در مقاله خود با عنوان «Web 2.0 چیست؟»که در پی توصیف روند های نو در توسعه وب بود، معرفی کرد.طی فقط دو سال، Web 2.0 تبدیل به یکی از داغ ترین مباحث در صنعت وب شد، جستجو کردن کلمه "Web 2.0 " در گوگل بیش از 100 میلیون نتیجه به دست می دهد.با آنکه ایده Tim در آغاز هیچگونه رهنمود گرافیکی در مورد روندهای طراحی Web 2.0 ارایه نمی کرد، ولی شکی نیست که در نتیجه کار او اکنون با یک روند گرافیکی مشخص مواجه هستیم.

شاید یکی از بهترین کسانی که آخرین روندهای وب را می شناسد،Mozilla باشد، یعنی سازمانی که مرورگر وب Firefox را عرضه می کند. وب سایت رسمی موزیلا یک مورد عملی عالی از طراحی Web 2.0 است.

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

4-شیوه های بافتی خودتان را ایجاد کنید

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

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

1396-05-30 16:31 مقالات آموزشی

مشاوره رایگان جهت طراحی سایت؟