---
title: Learn Better Design With Code Avengers
description: The ways the we visually communicate are very important. When creating digital outcomes like websites or games, it is important to understand the visual languages of design.
image: https://blogs.codeavengers.com/hubfs/design-graphic.jpg
---
[](https://www.codeavengers.com)
- Learn + Tech
Show submenu for Learn + Tech
- [Coding for Kids](https://www.codeavengers.com/jr)
- [Digital Skills for Ages 12+](https://www.codeavengers.com/pro)
- [Code Avengers in Schools](https://www.codeavengers.com/edu)
- [Professional Development for Teachers](https://www.codeavengers.com/pd)
- Impact
Show submenu for Impact
- [Customer Success](https://blogs.codeavengers.com/content/tag/customer-success)
- [Global Reach](https://www.codeavengers.com/global-reach)
- [Indigitech](https://www.codeavengers.com/indigitech)
- [Testimonials](https://www.codeavengers.com/testimonials)
- Explore
Show submenu for Explore
- [Our Community](https://code-avengers.mn.co/share/ILDeNr0PWnDxIqQp?utm_source=manual)
- [Blog](https://blogs.codeavengers.com/content)
- [About Us](https://www.codeavengers.com/about)
- [Contact Support](https://www.codeavengers.com/support)
- Events
Show submenu for Events
- [Cyberscape 2026](https://www.codeavengers.com/events/cyberscape-2026)
- [Digital Navigators](https://www.codeavengers.com/digital-navigators)
- Learn + Tech
Show submenu for Learn + Tech
- [Coding for Kids](https://www.codeavengers.com/jr)
- [Digital Skills for Ages 12+](https://www.codeavengers.com/pro)
- [Code Avengers in Schools](https://www.codeavengers.com/edu)
- [Professional Development for Teachers](https://www.codeavengers.com/pd)
- Impact
Show submenu for Impact
- [Customer Success](https://blogs.codeavengers.com/content/tag/customer-success)
- [Global Reach](https://www.codeavengers.com/global-reach)
- [Indigitech](https://www.codeavengers.com/indigitech)
- [Testimonials](https://www.codeavengers.com/testimonials)
- Explore
Show submenu for Explore
- [Our Community](https://code-avengers.mn.co/share/ILDeNr0PWnDxIqQp?utm_source=manual)
- [Blog](https://blogs.codeavengers.com/content)
- [About Us](https://www.codeavengers.com/about)
- [Contact Support](https://www.codeavengers.com/support)
- Events
Show submenu for Events
- [Cyberscape 2026](https://www.codeavengers.com/events/cyberscape-2026)
- [Digital Navigators](https://www.codeavengers.com/digital-navigators)
[Log In](https://account.codeavengers.com/login)
[Start For Free](https://account.codeavengers.com/signup)
Featured Post
# Learn Python With Code Avengers
Written By [Hannah Taylor](https://blogs.codeavengers.com/content/author/hannah-taylor)
June 17, 2016
[Read Article](https://blogs.codeavengers.com/content/learn-python-with-code-avengers)
Written By [Hannah Taylor](https://blogs.codeavengers.com/content/author/hannah-taylor)
June 17, 2016
[back](https://blogs.codeavengers.com/content)
[Courses](https://blogs.codeavengers.com/content/tag/courses)
# Learn Better Design With Code Avengers
Written By [Ilana Signal](https://blogs.codeavengers.com/content/author/ilana-signal)
February 19, 2021
Written By [Ilana Signal](https://blogs.codeavengers.com/content/author/ilana-signal)
February 19, 2021
### Learn Better Design With Code Avengers
##### Why should you learn design?
###### What is design?
There are many ways that we visually communicate. When creating digital outcomes, like websites or games, it is important to understand the visual languages of design.
The purposeful use of color, typography and layout can make a huge difference when creating meaning. Following simple design rules we can convey an idea or theme instantly.
Consider the differences between these movie posters with monsters. One is meant for children, and one is meant to be scary. Layout, color and font choice make all the difference in telling a clear story.
Movie posters
Kid-friendly monster
Scary monster
Compare movie posters: Kid-friendly monster versus Scary monster
---
###### Typography
Typography is the art or skill of arranging text on a page. Whether you’re a graphic designer, a programmer, an entrepreneur or a mommy blogger, at some stage you’ll have to make decisions about fonts to use and, where and when to use them. Understanding the history of typography and how it impacts the user experience of your website, game or app, will start you on the path to mastering the art.
In modern times, the far-reaching influence of the internet means that digital media is more consumed than printed media. Digital design skills are vital to stay ahead of the marketing game as traditional media takes a back seat. While designers have an endless supply of typographic styles and typefaces to choose from, there is increasing demand for designs that are able to hold the attention of digital media users.
###### Color Theory
The same can be said for color. A strong color palette and an understanding of your audience can lead to beautiful designs.
While some color choices rely on personal opinion, there are scientific ways to create striking work, harmony or what else you might be trying to achieve. "Less is more", and things like color wheels can help us to create dynamic palettes with only a few colors.
Using tools like [https://htmlcolorcodes.com/](https://htmlcolorcodes.com/), [https://color.method.ac/](https://color.method.ac/) or [Adobe Color](https://color.adobe.com/create) to auto generate palettes for you can help immensely to create a narrow selection of colors. It can also help with choosing safe colors when considering accessibility and color blindness.
Wherever you are on your journey to becoming a master designer, Code Avengers will help you get there. We’ll take you through the principles of typography, color theory, layout and User Experience design and the way to implement them using HTML and CSS. With these skills, you can create the perfect user experience for your website, game or app.
###### Video about the Code Avengers Design courses
## Design Course 1 - Typography
Thoughtful fonts are an essential ingredient in good design. Explore the history of typography and learn how to supercharge your designs with the right font types. Use CSS to present your text with the impact you need, and add special effects to make it come alive!
[Try the Typography course today](https://blog.codeavengers.com/profile#dr2)
## Design Course 2 - Color theory
This 20 lesson course looks at the theory of color from the physics behind colors to the myriad of color wheels. It looks at color from the viewpoints of psychology and branding. The third component of the course is how to actually add colors to a webpage CSS and write colors as HEX code.
[Check out the Color Theory course](https://blog.codeavengers.com/profile#dr2)
## For teachers
Students can learn about typography and color, key aspects of web design.
The two courses, on typography and color, are conceptual courses rather than coding courses. The tasks have interactive questions that build an understanding of the learning content. They have been written by collaboration between experienced teachers and graphic designers. The courses generally use web design examples using HTML and CSS. However, they are also relevant to graphic design, print design, and more.
Don't forget to check out our Lesson Plans and other resources when you visit the Teacher Tab at [https://www.codeavengers.com](https://www.codeavengers.com/)
[](https://www.codeavengers.com)
[Follow us on Facebook](https://www.facebook.com/CodeAvengers/) [Follow us on Twitter](https://x.com/codeavengers) [Follow us on YouTube](https://www.youtube.com/channel/UC7HKtyaPf9UmzQLuQnRzmpg/videos) [Follow us on Instagram](https://www.instagram.com/code_avengers/) [Follow us on Linkedin](https://www.linkedin.com/company/code-avengers/)
Learn + Teach
[Coding for Kids](https://www.codeavengers.com/jr)
[Digital Skills for Ages 12+](https://www.codeavengers.com/pro)
[Code Avengers in Schools](https://www.codeavengers.com/edu)
[Professional Development for Teachers](https://www.codeavengers.com/pro)
Impact
[Customer Success](https://blogs.codeavengers.com/content/tag/customer-success)
[Testimonials](https://www.codeavengers.com/testimonials)
[Indigitech](https://www.codeavengers.com/indigitech)
Explore
[Our Community](https://code-avengers.mn.co/)
[Blog](https://blogs.codeavengers.com/content)
[About Us](https://www.codeavengers.com/about)
[Digital Navigators](https://www.codeavengers.com/digital-navigators)
Support
[Start For Free](https://account.codeavengers.com/signup)
[Log In](https://www.codeavengers.com/login)
[Pricing](https://www.codeavengers.com/pricing)
[Contact Support](https://www.codeavengers.com/support)
Copyright © 2025 Digital Education Ltd
[Cancellation Policy](https://www.codeavengers.com/cancellation)
[Privacy Policy](https://www.codeavengers.com/privacy)
[Cookie Policy](https://www.codeavengers.com/cookies)
[Terms of Service](https://www.codeavengers.com/terms)
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Ilana Signal",
"url" : "https://blogs.codeavengers.com/content/author/ilana-signal"
},
"dateModified" : "2025-02-21T00:27:34.969Z",
"datePublished" : "2021-02-19T05:00:00.000Z",
"headline" : "Learn Better Design With Code Avengers",
"image" : [ "https://blogs.codeavengers.com/hubfs/design-graphic.jpg" ],
"mainEntityOfPage" : {
"@id" : "https://blogs.codeavengers.com/content/learn-better-design-with-code-avengers",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blogs.codeavengers.com/hubfs/Logo_Code_Avengers-01-1.png"
},
"name" : "Digital Education Limited"
}
}
```