Web designers are required to think through problems in a way that computers can understand, hence “computational thinking” is an indispensable skill set for them to have. It offers systematic tools needed to solve complex assignments from clients. 

Computational thinking enables web designers to break down a problem, spot patterns in data, identify and focus on absolutely necessary aspects of an assignment, while leaving aside unnecessary information that will bog down the process.

As a tool for thorough planning, it avoids costly mistakes that come as a result of rushing to complete a project without having considered different facets of the problem at hand. 

What is Computational Thinking? 

thinking as a concept can sound intimidating. But every day, in all
aspects of our lives, we perform computational thinking. Think of the following
actions and decisions that go into them: 

  • You want to make
    yourself a cup of tea or coffee.
  • You want to buy a car.
  • You want to change
  • You want to move to
    another city.
  • You want to buy
    a house.                         
  • You want to write a
  • You want to create an

The process of planning
and reaching these goals involves computational thinking of some kind.

Planning involves
breaking down these problems into manageable parts and coming up with sets of
solutions that enable us to reach the goal we have in mind.

breaking problems down into manageable partsbreaking problems down into manageable partsbreaking problems down into manageable parts
Breaking down problems

For our purposes, since
as web designers we want to use computers to help us solve problems at hand, computational
thinking is really about understanding the complex problem at hand, then breaking it
down into a series of smaller manageable problems. We then develop ideas on how to solve these smaller individual problems,
and finally communicate the resultant ideas in a series of steps that can be
understood and processed by a computer.

This approach follows what we call “the principles of computational thinking”.

The Principles of Computational Thinking

There are four such principles:

  1. Decomposition
  2. Abstraction
  3. Pattern Recognition
  4. Algorithm Writing

These are key techniques that will help you think computationally through
a complex problem (challenge, or task) before writing a single line of code. Let’s examine them.

1. Decomposition 

This is the breaking down a complex problem or system into smaller, more easily solved parts. These smaller problems are solved one
after another until the bigger complex problem is solved.

“If a problem is
not decomposed, it is much harder to solve. Dealing with many different stages
all at once is much more difficult than breaking a problem down into a number
of smaller problems and solving each one, one at a time.” – BBC Bitesize                                                   

2. Pattern Recognition 

Once you’ve decomposed the complex problem
into smaller problems the next step is to look at similarities they share.

Patterns are shared characteristics
that occur in each individual problem. What similarities do you observe?
Finding these similarities in small decomposed problems can help us solve complex
problems more efficiently.

 3. Abstraction

“Abstraction” refers to focusing on the important information only, ignoring irrelevant detail. To reach a solution we need to
ignore unnecessary characteristics into order to focus on those that we do.

So what is this important information
that we need to focus on? In abstraction the focus is mainly
on general characteristics that are common to each element, instead of specific

Once you have the general
characteristics, you can create a “model” of the problem; a model being the general
idea of the problem we are trying to solve.

“If we don’t abstract we may end up with the
wrong solution to the problem we are trying to solve.” – BBC Bitesize

Once we have a model, we can
design an algorithm

4. Algorithm Writing

You’ve broken down the big problem
into smaller, easily manageable problems. You’ve identified similarities
between these problems. You’ve focused on relevant details
and left behind anything irrelevant.

Now it’s time to develop
step-by-step instructions to solve each of the smaller problems, or the rules to
follow when solving the problem. These simple steps or rules are used to program
a computer to help solve a complex problem in the best way. They are also
called “algorithms”.

An algorithm is a
plan, a set of step-by-step instructions used to solve a problem.

”Algorithms don’t always involve complicated feats of programming; at heart, they are sequences of steps to move toward a goal.” – John Villasenor

Writing an
algorithm requires extensive planning for it to work correctly. The solution
your computer offers is as good as the algorithm you write. If the algorithm is
not good, then your solution will not be good either.

Using Flowcharts

Flowcharts offer a perfect way to represent algorithms.

“A flowchart is a type of diagram that represents an algorithmworkflow or process, showing the steps as boxes of various
kinds, and their order by connecting them with arrows. This diagrammatic
representation illustrates a solution model to a given problem.” – Wikipedia

Flowcharts are an
easy way to plot out algorithms, especially if they need to output different
results along the way. They use standard styling conventions. Flowcharts flow
from top to bottom and left to right.

example of ui elements from ux kitsexample of ui elements from ux kitsexample of ui elements from ux kits
Flowchart element examples from UX Kits

Using Pseudocode

While decomposing
the problem at hand into smaller manageable parts, you’ve been communicating
your findings, ideas, and possible solutions in plain English (or whatever
language you use to communicate).

Computers don’t
understand instructions in English. They understand code. Code or algorithms which form a set of instructions with very specific syntax.  

But before you use
your findings to write code that the computer will understand, it’s
usually advisable to write them down in pseudocode.

Pseudocode helps
you plan the solutions to your problem to avoid any mistakes when writing code. It’s a
way of writing instructions in a simplified way that reads like code. Pseudocode is
not code, however–it does not have specific syntax that code uses.

Pseudocode is
best written using keywords and variables. Variables in
programming stand in for a value, a word, or chunk of code. In programming
the value of variables changes depending on where you are in the code.

For example, this pseudocode (taken from The University of Tennessee) might calculate pay:

INPUT hours
INPUT rate
pay = hours * rate

And this, slightly more complex example might calculate pay with overtime:

INPUT hours, rate
IF hours ≤ 40
      pay = hours * rate
      pay = 40 * rate + (hours – 40) * rate * 1.5

 Pseudocode utilizes
code-like terms that are helpful when translating it into code.

  • STOP/END Computers are literal. You need to tell them when a statement or instruction is
    done. Do this by writing STOP or END.
  • IF/ELSE/THEN Computers
    understand conditions: if A happens then do B, if not then do C.
  • INPUT/OUT Some code
    requires input in order to run and create an output result. Input is for data that a user or another source will be giving to the
    computer. Output is used to indicate the end result of a series of commands. 
  • STORE/SAVE Pseudocode
    term that instructs a computer to save or store a value whenever necessary. 


There’s actually a fifth part to this whole process. You’ve used
computational thinking to arrive at a solution. The solution is an algorithm
that can be used to program the computer.

You’re itching to start
programming, but before you go ahead you must evaluate the solution. Why?

“Without evaluation any faults in the algorithm will not be picked up,
and the program may not correctly solve the problem, or may not solve it in the
best way.” – BBC Bitesize

Think of evaluating
your algorithm as “debugging”.


thinking runs through all aspects and functions of 21st century
business. It is an indispensable problem solving skill for web designers who
eventually have to represent solutions in a language that computers can
understand and process.

Remember, computational
thinking involves the following steps:

  1. Decomposition: breaking down a problem
    into its component parts.
  2. Pattern Recognition: identifying similarities
    in component parts of a problem.
  3. Abstraction: focusing on important
    general information and leaving aside information that is irrelevant to the
  4. Algorithm writing: writing the code
    that creates the intended solution. Writing step by step instruction that can
    be read and processed by the computer. The instructions are written using relevant
    information gathered from decomposing, pattern recognition and abstraction.
  5. Evaluation: finding bugs in the algorithm and correcting them to ensure it works without any glitches.

Useful Resources

©2024 SIRRONA Media, LLC.  All Rights Reserved.  

Log in with your credentials

Forgot your details?