Teaching web design at the Cheltenham Design Academy

The Cheltenham Design Academy helps young people develop their creative potential through a free Saturday school.

Cheltenham Design Academy

During the academic year, a group of local 14-16 year olds explore their creative potential in a series of modules covering such diverse areas as graphics and photography, engineering and architecture.

All classes are taught by experienced professionals working in their fields, allowing young people to understand how creativity can solve problems, improve lives and encourage wellbeing.

Global businesses such as Superdry and GE show how creativity fits into our wider world.

This year, we got involved to teach the Cheltenham Design Academy students web design… in 2 days!

Cheltenham Design Academy has been running for 4 years, and this year we introduced a web design module.

The aim of the 2 day web design module was to introduce the students to web design and development.

We run through a quick timeline of the web and highlighted the fact that there’s now 1 billion websites in the world. So, there’s a definite need for more great web designers in the world, and it’s important for the students to understand this.

What we taught them

We wanted the students to be able to visually interpret and structure information well on the internet. So, we introduced the students to infographics.

What better way to visually represent information, than to create an infographic.

The purpose of the infographic is to support the academy and explain to potential students, teachers, parents and others what the academy has achieved over 4 years.

We presented 11 facts from the last 4 years of the Cheltenham Design Academy and the brief was to visualise the facts and create an infographic with them.

11 facts from Cheltenham Design Academy

  1. The CDA has been running for 4 years
  2. 120 students have studied at the academy over the past 4 years
  3. Software programs learnt on the course: Illustrator, Photoshop, InDesign, Dreamweaver (HTML & CSS)
  4. Female to male split on the course is 60% girls / 40% boys
  5. 30 Students study at the academy each year
  6. It’s FREE!
  7. Age range: 14 – 16 year olds
  8. 33,120 hours of learning time logged at the academy over the past 4 years
  9. Schools participating in the programme:Balcarras, Barnwood Park, Brockworth Enterprise, Cheltenham Bournside, Chosen Hill, Churchdown, Cleeve, Pate’s, Pittville and St Peter’s High.
  10. Modules covered – graphics, photography, engineering, web design and architecture.
  11. 13.4% of CDA students have gone on to college or uni to study subjects in the creative industries
11 Facts of the Cheltenham Design Academy

11 Facts of the Cheltenham Design Academy

How and what we taught them

Before teaching (something which George and I have never done before), I reached out to Jon Bell (senior designer at Twitter) to ask his advice. As well as many other things, Jon runs 1 day design courses (uxlaunchpad.com) for people who want to know how to design for the web.

Jon, kindly responded and gave us some amazing tips for teaching. The stand out info was to make sure we warm up the students brains. We did this by using a brick!

1. Warming up with a brick no heavy lifting necessary

This is a great warm up for the brain, and something that I encourage everybody to do on Monday mornings!

“What are things you can do with a brick?”

You wait 5 minutes while everyone struggles to write down ideas. Then you ask everyone to read their first idea and their last.
The first one will be plain, like “build a house” or “throw it someone” or “prop open a door”. But the last ones are magic because people have had to dig really deep, which leads to better thinking.

2. Visualising ideas quickly get them out of our brains and on to paper

Now that the students creative brains were warmed up we put pen to paper and sketched visuals based on the 11 facts listed above. The importance of sketching was to teach the students to quickly get ideas out of their heads and get them onto paper.

We helped them to understand the importance of the idea, over creating a perfectly polished visual. The analogy for this was to imagine they were playing Pictionary, and not to worry about the execution of finished visual but to concentrate on creating amazing concepts.

The concepts the students were creating were amazing, and we loved the sea of ideas that were pouring out of their brains and onto paper!

3. From paper to screen

Once the students were armed with ideas, we jumped onto Adobe Illustrator (industry leading graphics software) to bring their ideas to life and create finalised visuals for their infographic.

Adobe Illustrator is a tricky program to master, but the students (aged 14-16) got the hang of it and we were extremely impressed with how quickly they grasped it!

Learning Adobe Illustrator

4. Learning about structure

After a lesson in creating digital visuals, we went back to pen and paper to plan out the structure of the infographics

A fundamental part of web design is prioritising information. The web is a faced paced environment, where people often scan read and scroll pretty quickly.

From top to bottom (of any given web page) web designers need to think about their users and decide how they want to introduce a page (the top) and consider the lasting impression or message that you want to leave people with (the info at the bottom of the page).

Our students ordered their facts in a logical order and also considered how they wanted to tell the story of the Cheltenham Design Academy.

Telling a story is another fundamental part of the web, and our students came up with some brilliant ways of visually telling stories.

hanging infographic

puzzle-infographic

5. Developing websites

The bulk of the 2 day web course was heavily based around design, but it’s inevitable that a web designer will see their beautiful designs published in HTML and CSS(the code behind web pages like this one).

To break away from web design, we introduced the students to HTML code. Building sites with HTML, or Front End Development (as it’s known in the industry) is important for web designers to understand. Considering HTML and CSS when designing, makes you a stronger web designer.

The fundamentals of HTML were taught to the students (with the thanks to Codecademy) and we helped them to understand the structure of a website, and they built a very simple web page.

The best part of this process is when students create a link between 2 pages. Once the link is coded and they click the link to go to another page, that’s where the magic is realised and they learnt a very simple but powerful interaction.

I remember the first time I created a link between 2 pages and being extremely excited that I’d achieved this. To share that moment with the other students was brilliant!

6. Rounding up

The final exercise in the web design process was possibly the best and most fun.

We split the students into 3 groups and tasked them with taking all of the concepts and distilling them into 3 infographics.

The group task taught them how to diplomatically choose the most appropriate concepts (based on the 11 facts) and create a final infographic.

students-sketching-infographics

We absolutely loved teaching the 2 day web design course at Cheltenham Design Academy and were extremely impressed with the high level of creativitiy and enthusiasm!

Well done to all the students involved and the Cheltenham Design Academy for giving them a great opportunity.

Can’t wait to go back next year!