The right design of texture captures attention art texture
To create a texture, we must first understand the elements of graphic design. The elements are as listed as below:
Point or dot can be used to build any graphic element as they have no scale or dimensions unless they have a frame of reference. For example, a huge billboard might look like a period but up close it’s the size of your head. Furthermore, if points are grouped together, they can create lines, shapes and volume. As told, when doing website graphics, it’s easy to look at the big picture and ignore the points that make up each image such as the picture below.
Figure 1: Group of points used to make an image
A line is formed when two or more points are connected. Line is the most expressive and the most common element of graphic design, as we can see where most people consider using lines for CSS borders or hyperlink underlines. Lines are divided into horizontal and diagonal.
|Horizontal line as background||Provides texture and interest to a design|
|Motif of diagonal lines||Make the design a little more on edge which cause the eyes to move around constantly|
|Diagonal lines||Suggest movement|
|Varying line thickness and direction|
Generate a sense of expression and character
|Jagged lines with sharp angels||Dangerous and frantic|
|Gentle rolling, curvy lines||Relaxing and smooth|
|90-degree angles||Feel sharp and mechanical|
|Lots of curve and angle||Expressiveness such as graffiti or handwriting|
Example of website that made good use of line will be The IdeaLists.
Figure 2: Line Styling on The Idealist
They used the combination of very thin lines paired with heavy thick lines for the “how it works”. Next, a zigzag pattern below he logo. This helps to unify the design along with the color.
Shapes are divided into two categories, i.e. geometric shapes and freeform shapes
Figure 3: Geometric and Freeform shapes
In web design, we are limited to use a rectangle because of the blocks of contents we put in. But to make it to feel better, we can adjust the rectangle to not to look rectangular such as adding a circle image to it or event making rounded corners.
Circle as a background
Figure 4: Text inside an oval
Circle as a background is a good way to center all the text but it is limited to the number of words the user wants to put. If more words were to be inserted, it will break the radius of the circle and would not look as pleasing as it should.
Rounded corners soften the layout, creating a more organic and smoother feel. In making shapes to the websites, Simon Collison’s used media queries to help beautify his website. A media query is a new feature of CSS3 that allows us to define a conditional rule for applying a certain set of styles. Example would be resizing the window to change colors of the background. For instance, a wide screen would show a green background and a small one would should blue. The example can be seen by visitng w3schools. Besides rounded corners, a rotation will break up horizontal and vertical monotony of the web and it will help to make it feel more organic.
Figure 5: SXSW Design Workshop
For instance, the rotated logo would provide a nice feeling rather than it being placed straight. An addition to the rounded corners add more feel to it, rather than a plain rectangle.
Shapes and Layout
Shapes and layout will provide a good illustration to the users. One way to determine how much influence shapes have on a design is to isolate them by tracing out the layout’s main elements. Ways to do this will be either printing a screenshot of the design and tracing the shapes by hand or by opening the screenshot in a graphics program and removing the image after you’ve traced the key elements onto a new layer. This is called the economy of line test. Example would be below:
Figure 6: Economy of Line Test
Volume and Depth
Perspective & Proportion
This is the spatial illusion of objects which tend to look smaller as they become further away. An example would be the Great Wall of China. We know that the walls would always be the same size but our perspective of it changes when we view it from a distance. It would become smaller and if you include proportions of objects into the picture, it is a good way to create emphasis. For instance, imagine people walking a long the path and you talking a selfie, you would look bigger than the people from a distance. Hence, you are the main attraction as you look bigger than other people but in real life we know that we are all almost same in sizes.
Figure 7: Perspective on the Great Wall of China
Light and Shadow
Figure 8 : 3 Circles
The first circle which is the most left has a basic drop shadow applied to it. Hence, it’s obvious that this is a 2D object but a second one has a linear gradient with a shadow that is skewed to the right. This combination suggests that it’s a 2D circle casting a shadow on an angled surface. Lastly, a radial gradient (one that’s applied in all directions from a central point), which looks spherical due to the highlight and shadows that the gradient creates. The location of the light source and the shadow it cast matches each other which produce the volume and depth of the shape.
An example of application will be highlighting the menu that is active. Such can be seen in the figure below:
Figure 9: Highlight on Products
Pattern is used to add richness and visual interest to all types of design. There is 5- CSS properties to set the background of an element:
So now you know all about texture, is time to think out of the box and create a beautiful texture for your website!
Source: The Principles of Beautiful Web Design 2nd Edition, by Jason Beaird
Thumbnail: Designed by Freepik