{"id":1289,"date":"2021-04-06T10:27:49","date_gmt":"2021-04-06T14:27:49","guid":{"rendered":"https:\/\/brooklyndesign.studio\/?p=1289"},"modified":"2023-03-09T15:38:23","modified_gmt":"2023-03-09T20:38:23","slug":"why-textures-are-a-good-idea","status":"publish","type":"post","link":"https:\/\/brooklyndesign.studio\/why-textures-are-a-good-idea\/","title":{"rendered":"Why Textures are a Good Idea"},"content":{"rendered":"

[et_pb_section fb_built=”1″ custom_padding_last_edited=”on|phone” admin_label=”section” _builder_version=”3.22″ custom_padding=”0px|0px|0px|0px” custom_padding_tablet=”” custom_padding_phone=””][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”||0px|”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Opening” _builder_version=”3.27.4″ text_text_color=”#000000″ text_font_size=”18″ text_line_height=”1.8em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_font_size_tablet=”16″ text_font_size_phone=”14″ text_font_size_last_edited=”on|phone”]<\/p>\n

Those of us gifted with five (or six) senses know both the natural and man-made world around us by seeing, touching, tasting, smelling, and listening to it. When it comes to websites, we can only see and sometimes listen to them. I feel that the visual experience of a website can be enhanced by the use of textures even if you cannot actually feel them.<\/p>\n

My other undertaking is a web startup and I wish I had screenshots to share with you to show you how unappealing Crowdzu<\/a>‘s original footer was. Fortunately, I was introduced to Subtle Patterns<\/a> and our footer underwent a transformation. This is what it looks like now with a background texture and lots of pops of color:<\/p>\n

[\/et_pb_text][et_pb_image src=”https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/crowdzu-footer.jpg” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”crowdzu footer” _builder_version=”4.6.5″ hover_enabled=”0″ animation=”off” sticky=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” always_center_on_mobile=”on” title_text=”crowdzu footer” sticky_enabled=”0″][\/et_pb_image][et_pb_text admin_label=”transparent textures” _builder_version=”3.27.4″ text_text_color=”#000000″ text_font_size=”18″ text_line_height=”1.8em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_font_size_tablet=”16″ text_font_size_phone=”14″ text_font_size_last_edited=”on|phone”]<\/p>\n

Chunks of black text (#000000 – for those who are following along from my previous blog posts) on a white (#ffffff) background or the opposite, while classy, can be a bit hard on the eyes because of the extreme contrast. If you happen to be using WordPress, use a color picker tool (Read more about it here<\/a>) and check out the color of your dashboard. You will find that what looks like black is actually #23282D and not true black (#000).<\/p>\n

For me, another way to reduce the impact of high contrast colors is to apply a subtle texture to the background\/background color.<\/p>\n

Using varied textures along with color blocks can also help break a webpage into sections in a more attractive way. I have done this on our homepage<\/a>. What to you think? The ruled background of our bios<\/a> page is also a texture!<\/p>\n

Even though I thought I was in texture heaven with the discovery of Subtle Patterns, things really got kicked up a notch when I stumbled upon Transparent Textures<\/a>. This website allows you to overlay different colors over Subtle Patterns’ textures. If you have read this far, you really should go check them out. One thing you will notice immediately is that a color can look very different depending on the texture used.<\/p>\n

Here is an example:<\/p>\n

[\/et_pb_text][et_pb_text admin_label=”green” _builder_version=”3.27.4″ text_font=”|on||on|” text_text_color=”#000000″ background_color=”#83c81a” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center”]This is a bright green: #83C81A
\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”6px||0px|”][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”3px tile” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/3px-tile.png) repeat #83C81A !important;”]<\/p>\n

Same green as above<\/p>\n

Texture = 3Px Tile<\/p>\n

[\/et_pb_text][et_pb_text admin_label=”brick wall” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/brick-wall-dark.png) repeat #83C81A !important;”]<\/p>\n

Same green as above<\/p>\n

Texture = Brick Wall Dark<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”crisp paper ruffles” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/crisp-paper-ruffles.png) repeat #83C81A !important;”]<\/p>\n

Same green as above<\/p>\n

Texture = Crisp Paper Ruffles<\/p>\n

[\/et_pb_text][et_pb_text admin_label=”carbon fibre” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” hover_enabled=”0″ custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/carbon-fibre.png) repeat #83C81A !important;” sticky_enabled=”0″]<\/p>\n

Same green as above<\/p>\n

Texture = Carbon Fibre<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”6px||0px|”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”wrap up” _builder_version=”3.27.4″ text_text_color=”#000000″ text_font_size=”18″ text_line_height=”1.8em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_font_size_tablet=”16″ text_font_size_phone=”14″ text_font_size_last_edited=”on|phone”]<\/p>\n

For your information, a background texture is created by repeating\/tiling a small image with transparency along both the X and Y-axis so it covers the area that it is applied to. All WordPress themes have a customizer option that will allow you to add a universal background image\/texture. If you, like me, would like to use different texture and color backgrounds within different sections of a webpage or website, you can use this little snippet of CSS code that is cross browser compatible.<\/p>\n

\n

background:url(link to texture<\/em>) repeat #color hex code<\/em> !important;<\/p>\n<\/blockquote>\n

All of the green texture blocks in this post were created with this code. Please share links If you have used textures on your website.<\/p>\n

[\/et_pb_text][et_pb_divider color=”#ff4600″ disabled_on=”on|on|off” admin_label=”Divider” _builder_version=”3.2″][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”2_3,1_3″ admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”0px|||”][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”PS” _builder_version=”3.27.4″ text_font_size=”18″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_font_size_tablet=”16″ text_font_size_phone=”14″ text_font_size_last_edited=”on|phone”]<\/p>\n

PS:<\/strong> I wanted to explain myself in case you are wondering why I picked this image to represent this post. For me, everything about this photo makes me think of textures:<\/em><\/p>\n