Web Development  «Prev  Next»

Lesson 5 Using signs
Objective How signs are design devices

How Signs and Design Devices create Meaning

In the digital world, signs or semiotics play a pivotal role in shaping the user experience on websites. They form the basis of a language used by web designers to convey meanings and interact with the website visitors. The application of these signs, as part of the visual and interactive language, aids in navigation, comprehension, and engagement.
Signs are omnipresent design devices found in various forms on a website. They include elements like icons, typography, colors, shapes, images, lines, textures, space, and movement. The thoughtful combination of these components constructs a distinct language that communicates the brand's personality, guides user behavior, and creates a resonant user experience.
Let's consider a few examples:
  1. Icons: Icons are powerful symbolic signs. They streamline complex concepts into easily digestible visual representations. A shopping cart icon on an e-commerce website universally signifies a place to collect chosen items for purchase, while a magnifying glass icon denotes a search function.
  2. Typography: Typography often communicates more than the literal meaning of the words. The choice of font style, size, and color communicates a message beyond the written text. A formal serif font may imply a professional, traditional brand, while a playful script font might suggest a more casual, creative company.
  3. Colors: Colors are potent signs that carry inherent psychological implications. For instance, green is often associated with nature and tranquility, and red can represent urgency or importance. Designers use color schemes strategically to elicit desired emotional responses from users or to highlight critical elements on a page.
  4. Shapes: Shapes can symbolize ideas and direct user behavior. Rectangles and squares are used for buttons or input fields, while circles might be used to highlight information. Moreover, the use of lines can guide the user's eyes through the website.
  5. Space: Negative space, or the empty space between elements, can act as a sign to emphasize content or create visual comfort, preventing cognitive overload.
  6. Movement: Animations, transitions, and interactive elements represent signs of dynamism and responsiveness, often used to engage users, provide feedback, or guide navigation.

These signs, individually and collectively, create layers of meaning on a website. Each design decision influences how a user interacts with the site, how they perceive the brand, and how successfully they achieve their goals on the site. As such, understanding and skillfully using these signs are key to effective website design.

Signs are Design Devices used to create Meaning

Explain how signs are design devices that are used to create meaning on a website. When reading a book, people interpret how letters are arranged in words, sentences, and paragraphs to create meaning. The letters serve as signs, or design devices, to aid interpretation. Similarly, when reading Web pages, people view a set of signs. Signs commonly used on Web pages include:

Design Devices Signs
Words Detailed information
Icons Pictures that represent tasks or objects
Labels Short phrases used for identification
Frames Shapes used to set content apart
Color Fields Visually highlighted areas on the screen
Animation Images that use movement

A Unit of text
Text is the detailed information.
  1. An icon: Icons are representations of tasks or objects.
  2. A label: Labels are used for identifying or clarifying an icon.
  3. A framed area: Frames are used to set content apart or divide a screen.
  4. A color-highlighted area: Color fields can be used to direct attention to a particular place on the screen.
  5. An animation figure: Animations are moving images that aid learning.
People do not always interpret or react to signs in the same way, especially when the signs represent something abstract. It is important to consider the likely characteristics of your audience when you choose signs for a website. For example, an elderly audience or an international audience might react differently than a teenage audience to signs you use.

History of Web Content

In the early years of the Web, content still took a back seat. On a typical Web project, if the writer got paid X, then the graphic designer got paid 2X, whoever did some basic programming and HTML got 3X, and, if there was advanced programming involved, then that person got 4X. In other words, the writer was the worst paid by far. I was telling someone who runs a web agency[1] about this, and they agreed. In fact, they never tell a client that they are giving them a writer because they know that the rate will drop through the floor. They come up with some fancy name instead, something that sounds a bit technical. Here is how a typical Web project used to work: IT spent lots of money on some content management software, which it then handed over to marketing, who in turn got a graphic design company to create some concepts. Half way through the project, someone mentioned that content would be needed for the website before it could be launched. The manager in charge of the project got the most junior person they could find to round up some content from the other departments. If this content was absolutely awful, the manager might get this junior person to rewrite it. Or perhaps they had a summer intern who could throw a few words together. That is how content was treated in many organizations.
In the next lesson, metaphors will be discussed to explain how to create meaning on a website.

[1]web agency: A web agency is a company that specializes in creating and managing digital solutions for businesses and organizations. This primarily includes websites and web applications.

SEMrush Software