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
- You want to buy
- You want to write a
- You want to create an
The process of planning
and reaching these goals involves computational thinking of some kind.
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.
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:
- Pattern Recognition
- 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.
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.
“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
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
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.
Flowcharts offer a perfect way to represent algorithms.
“A flowchart is a type of diagram that represents an algorithm, workflow 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.
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).
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.
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.
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:
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
code-like terms that are helpful when translating it into code.
STOP/ENDComputers are literal. You need to tell them when a statement or instruction is
done. Do this by writing
understand conditions: if A happens then do B, if not then do C.
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.
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.
thinking involves the following steps:
- Decomposition: breaking down a problem
into its component parts.
- Pattern Recognition: identifying similarities
in component parts of a problem.
- Abstraction: focusing on important
general information and leaving aside information that is irrelevant to the
- 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.
- Evaluation: finding bugs in the algorithm and correcting them to ensure it works without any glitches.