Design and Coding: Do You Need to Know Both?

Design Team 4

DESIGN AND CODING: DO YOU NEED TO KNOW BOTH?

by Evan-Zane Green

This is an interesting topic because the answer is “Maybe.” It is not mandatory that designers learn to understand or use coding languages. Design covers many areas and in some of them, such as print or book design, it may never come up. However, when it comes to areas such as web design, user experience or user interface design, just to name a few, it becomes more important. Moreover, design teams aren’t only made up of designers – they are made up of developers, engineers, copywriters, content managers and many more. For the purpose of this article however, the most important team member is the developer. Designers and developers will come in contact with each other very often. Designers will make assets for a website for which a developer is writing the code and developers will have specific requirements that the designer must adhere to to make everything run smoothly. This is why designers who understand coding will have an easier time. Before going further, I am going to talk a little bit about coding languages for the web (not for mobile apps or other products such as Swift for iOS and Java for Android) but the points I hit on should still apply.

Coding Languages of the Web

There are three major languages that create a web page and, like typical languages, they have their nuances and off-shoots. First, there is Hypertext Markup Language, better known as HTML; second, Cascading Style Sheets, or CSS; third is JavaScript. If you think of the web page as the body, HTML would be the skeleton, JavaScript would be the underlying muscles and CSS would be the skin, clothing, makeup and any other cosmetics.

HTML “describes the structure of a web page” (Unknown). Through this, designers and developers create the building blocks of websites. That include the words that need to be there, the images, links and many other things which are referred to as elements. This allows a website to understand how a page should be arranged.

HTML

CSS, as the name suggests, creates the style of your web page (Morris). Websites don’t only need to have the necessary elements present, they also need to be fashionable. CSS is responsible for “[specifying] your document’s style—page layouts, colours, and fonts are all determined with CSS” (Morris). Simply put, it makes it look good.

CSS

Lastly, we have JavaScript. It is used to add interactivity to a web page. It takes what would be a static page, similar to a book, and transforms it into something visitors to the site can engage with. JavaScript is a “scripting language” which is “used to automate processes that users would otherwise need to execute on their own” (Morris). It is known for adding interactivity to web pages but it is also responsible for creating a lot of mobile apps as well.

JS

Why Learn?

“So, this information is great but why should I bother to learn any of this?” I hear you ask. Well there are a few reasons:

Ease of Communication

Designers need to communicate with developers and nothing makes communication easier than speaking the same language. When you can talk to your developers about how to tackle a problem from both a design and programming standpoint, work will become easier and, hopefully, more enjoyable.

Faster Design and Iteration

When you are designing, you will need to be able to create quickly and with few mistakes. If you create while considering how the design will function, there will be fewer rounds of fixes and you and your team can get to your design goal much faster.

An Ironclad Defense

As a designer, you have to be able to defend our design decisions to anyone, from clients to team members. Understanding the functionality can help you better defend your design choices and help you understand issues that are pointed out to you. Listening to criticism is just as important as giving it.

Bringing It to Life

What if you are the designer, copywriter, developer and office dog-sitter? When you are also required to bring your designs out of your head and into the real world, being able to make that happen by coding them is vital.

How do You Start?

So I have convinced you (fingers crossed) and you want to know where to begin your deep dive into coding for the web and everything else. First, take it slowly. There is no need to know everything immediately (and it’s impossible). However, there are many good resources:

Are you a video watcher? Watch tutorial videos on LinkedIn Learning or Youtube. You can follow along in your favourite code editor. Oh, you don’t have one, well VS Code is my favourite and it is free.

Are you a reader? Read the documentation for HTML, CSS and JavaScript.

Do you just want to sink your teeth in? A website like W3Schools allows you to practice on small chunks of code. Want more of a challenge? Find your favourite or least favourite website and redesign it. You are sure to have a lot of fun!

Do you want to talk to experts? In-person (not a good idea during a pandemic) and virtual meetups, and social media connections are great ways to find experts and ask them for help. Just always be understanding if they can’t help and respectful of people’s time if they do.

As I mentioned earlier, this isn’t mandatory. You can be a good designer without it. However, the thing about staying in your design bubble is that it traps you inside as much as it keeps everything else out. Personally, I think popping the bubble helps you grow past just being a ‘good designer.’

Sources

  • Chen, Winne WT. “Learning to Code — A Designer’s Perspective.” UX Collective, 6 Aug. 2019, uxdesign.cc/learning-to-code-a-designers-perspective-8aa2dfb0e2e.
  • Morris, Scott. “What Is CSS, How Does It Work and What Is It Used For?” Skillcrush, 13 Oct. 2020, skillcrush.com/blog/css/.
  • Morris, Scott. “What Is JavaScript? A Guide for Total Beginners.” Skillcrush, 13 Oct. 2020, www.skillcrush.com/blog/javascript/.
  • Unknown. HTML Introduction. www.w3schools.com/html/html_intro.asp.

Credits

Images by artinspring and WavebreakMediaMicro and Eduardo Flores

Design Team 4

DESIGN AND CODING: DO YOU NEED TO KNOW BOTH?

by Evan-Zane Green

This is an interesting topic because the answer is “Maybe.” It is not mandatory that designers learn to understand or use coding languages. Design covers many areas and in some of them, such as print or book design, it may never come up. However, when it comes to areas such as web design, user experience or user interface design, just to name a few, it becomes more important. Moreover, design teams aren’t only made up of designers – they are made up of developers, engineers, copywriters, content managers and many more. For the purpose of this article however, the most important team member is the developer. Designers and developers will come in contact with each other very often. Designers will make assets for a website for which a developer is writing the code and developers will have specific requirements that the designer must adhere to to make everything run smoothly. This is why designers who understand coding will have an easier time. Before going further, I am going to talk a little bit about coding languages for the web (not for mobile apps or other products such as Swift for iOS and Java for Android) but the points I hit on should still apply.

Coding Languages of the Web

There are three major languages that create a web page and, like typical languages, they have their nuances and off-shoots. First, there is Hypertext Markup Language, better known as HTML; second, Cascading Style Sheets, or CSS; third is JavaScript. If you think of the web page as the body, HTML would be the skeleton, JavaScript would be the underlying muscles and CSS would be the skin, clothing, makeup and any other cosmetics.

HTML “describes the structure of a web page” (Unknown). Through this, designers and developers create the building blocks of websites. That include the words that need to be there, the images, links and many other things which are referred to as elements. This allows a website to understand how a page should be arranged.

HTML

CSS, as the name suggests, creates the style of your web page (Morris). Websites don’t only need to have the necessary elements present, they also need to be fashionable. CSS is responsible for “[specifying] your document’s style—page layouts, colours, and fonts are all determined with CSS” (Morris). Simply put, it makes it look good.

CSS

Lastly, we have JavaScript. It is used to add interactivity to a web page. It takes what would be a static page, similar to a book, and transforms it into something visitors to the site can engage with. JavaScript is a “scripting language” which is “used to automate processes that users would otherwise need to execute on their own” (Morris). It is known for adding interactivity to web pages but it is also responsible for creating a lot of mobile apps as well.

JS

Why Learn?

“So, this information is great but why should I bother to learn any of this?” I hear you ask. Well there are a few reasons:

Ease of Communication

Designers need to communicate with developers and nothing makes communication easier than speaking the same language. When you can talk to your developers about how to tackle a problem from both a design and programming standpoint, work will become easier and, hopefully, more enjoyable.

Faster Design and Iteration

When you are designing, you will need to be able to create quickly and with few mistakes. If you create while considering how the design will function, there will be fewer rounds of fixes and you and your team can get to your design goal much faster.

An Ironclad Defense

As a designer, you have to be able to defend our design decisions to anyone, from clients to team members. Understanding the functionality can help you better defend your design choices and help you understand issues that are pointed out to you. Listening to criticism is just as important as giving it.

Bringing It to Life

What if you are the designer, copywriter, developer and office dog-sitter? When you are also required to bring your designs out of your head and into the real world, being able to make that happen by coding them is vital.

How do You Start?

So I have convinced you (fingers crossed) and you want to know where to begin your deep dive into coding for the web and everything else. First, take it slowly. There is no need to know everything immediately (and it’s impossible). However, there are many good resources:

Are you a video watcher? Watch tutorial videos on LinkedIn Learning or Youtube. You can follow along in your favourite code editor. Oh, you don’t have one, well VS Code is my favourite and it is free.

Are you a reader? Read the documentation for HTML, CSS and JavaScript.

Do you just want to sink your teeth in? A website like W3Schools allows you to practice on small chunks of code. Want more of a challenge? Find your favourite or least favourite website and redesign it. You are sure to have a lot of fun!

Do you want to talk to experts? In-person (not a good idea during a pandemic) and virtual meetups, and social media connections are great ways to find experts and ask them for help. Just always be understanding if they can’t help and respectful of people’s time if they do.

As I mentioned earlier, this isn’t mandatory. You can be a good designer without it. However, the thing about staying in your design bubble is that it traps you inside as much as it keeps everything else out. Personally, I think popping the bubble helps you grow past just being a ‘good designer.’

Sources

  • Chen, Winne WT. “Learning to Code — A Designer’s Perspective.” UX Collective, 6 Aug. 2019, uxdesign.cc/learning-to-code-a-designers-perspective-8aa2dfb0e2e.
  • Morris, Scott. “What Is CSS, How Does It Work and What Is It Used For?” Skillcrush, 13 Oct. 2020, skillcrush.com/blog/css/.
  • Morris, Scott. “What Is JavaScript? A Guide for Total Beginners.” Skillcrush, 13 Oct. 2020, www.skillcrush.com/blog/javascript/.
  • Unknown. HTML Introduction. www.w3schools.com/html/html_intro.asp.

Credits

Images by artinspring and WavebreakMediaMicro and Eduardo Flores

Design Team 4

DESIGN AND CODING: DO YOU NEED TO KNOW BOTH?

by Evan-Zane Green

This is an interesting topic because the answer is “Maybe.” It is not mandatory that designers learn to understand or use coding languages. Design covers many areas and in some of them, such as print or book design, it may never come up. However, when it comes to areas such as web design, user experience or user interface design, just to name a few, it becomes more important. Moreover, design teams aren’t only made up of designers – they are made up of developers, engineers, copywriters, content managers and many more. For the purpose of this article however, the most important team member is the developer. Designers and developers will come in contact with each other very often. Designers will make assets for a website for which a developer is writing the code and developers will have specific requirements that the designer must adhere to to make everything run smoothly. This is why designers who understand coding will have an easier time. Before going further, I am going to talk a little bit about coding languages for the web (not for mobile apps or other products such as Swift for iOS and Java for Android) but the points I hit on should still apply.

Coding Languages of the Web

There are three major languages that create a web page and, like typical languages, they have their nuances and off-shoots. First, there is Hypertext Markup Language, better known as HTML; second, Cascading Style Sheets, or CSS; third is JavaScript. If you think of the web page as the body, HTML would be the skeleton, JavaScript would be the underlying muscles and CSS would be the skin, clothing, makeup and any other cosmetics.

HTML “describes the structure of a web page” (Unknown). Through this, designers and developers create the building blocks of websites. That include the words that need to be there, the images, links and many other things which are referred to as elements. This allows a website to understand how a page should be arranged.

HTML

CSS, as the name suggests, creates the style of your web page (Morris). Websites don’t only need to have the necessary elements present, they also need to be fashionable. CSS is responsible for “[specifying] your document’s style—page layouts, colours, and fonts are all determined with CSS” (Morris). Simply put, it makes it look good.

CSS

Lastly, we have JavaScript. It is used to add interactivity to a web page. It takes what would be a static page, similar to a book, and transforms it into something visitors to the site can engage with. JavaScript is a “scripting language” which is “used to automate processes that users would otherwise need to execute on their own” (Morris). It is known for adding interactivity to web pages but it is also responsible for creating a lot of mobile apps as well.

JS

Why Learn?

“So, this information is great but why should I bother to learn any of this?” I hear you ask. Well there are a few reasons:

Ease of Communication

Designers need to communicate with developers and nothing makes communication easier than speaking the same language. When you can talk to your developers about how to tackle a problem from both a design and programming standpoint, work will become easier and, hopefully, more enjoyable.

Faster Design and Iteration

When you are designing, you will need to be able to create quickly and with few mistakes. If you create while considering how the design will function, there will be fewer rounds of fixes and you and your team can get to your design goal much faster.

An Ironclad Defense

As a designer, you have to be able to defend our design decisions to anyone, from clients to team members. Understanding the functionality can help you better defend your design choices and help you understand issues that are pointed out to you. Listening to criticism is just as important as giving it.

Bringing It to Life

What if you are the designer, copywriter, developer and office dog-sitter? When you are also required to bring your designs out of your head and into the real world, being able to make that happen by coding them is vital.

How do You Start?

So I have convinced you (fingers crossed) and you want to know where to begin your deep dive into coding for the web and everything else. First, take it slowly. There is no need to know everything immediately (and it’s impossible). However, there are many good resources:

Are you a video watcher? Watch tutorial videos on LinkedIn Learning or Youtube. You can follow along in your favourite code editor. Oh, you don’t have one, well VS Code is my favourite and it is free.

Are you a reader? Read the documentation for HTML, CSS and JavaScript.

Do you just want to sink your teeth in? A website like W3Schools allows you to practice on small chunks of code. Want more of a challenge? Find your favourite or least favourite website and redesign it. You are sure to have a lot of fun!

Do you want to talk to experts? In-person (not a good idea during a pandemic) and virtual meetups, and social media connections are great ways to find experts and ask them for help. Just always be understanding if they can’t help and respectful of people’s time if they do.

As I mentioned earlier, this isn’t mandatory. You can be a good designer without it. However, the thing about staying in your design bubble is that it traps you inside as much as it keeps everything else out. Personally, I think popping the bubble helps you grow past just being a ‘good designer.’

Sources

  • Chen, Winne WT. “Learning to Code — A Designer’s Perspective.” UX Collective, 6 Aug. 2019, uxdesign.cc/learning-to-code-a-designers-perspective-8aa2dfb0e2e.
  • Morris, Scott. “What Is CSS, How Does It Work and What Is It Used For?” Skillcrush, 13 Oct. 2020, skillcrush.com/blog/css/.
  • Morris, Scott. “What Is JavaScript? A Guide for Total Beginners.” Skillcrush, 13 Oct. 2020, www.skillcrush.com/blog/javascript/.
  • Unknown. HTML Introduction. www.w3schools.com/html/html_intro.asp.

Credits

Images by artinspring and WavebreakMediaMicro and Eduardo Flores

Design Team 4

DESIGN AND CODING: DO YOU NEED TO KNOW BOTH?

by Evan-Zane Green

This is an interesting topic because the answer is “Maybe.” It is not mandatory that designers learn to understand or use coding languages. Design covers many areas and in some of them, such as print or book design, it may never come up. However, when it comes to areas such as web design, user experience or user interface design, just to name a few, it becomes more important. Moreover, design teams aren’t only made up of designers – they are made up of developers, engineers, copywriters, content managers and many more. For the purpose of this article however, the most important team member is the developer. Designers and developers will come in contact with each other very often. Designers will make assets for a website for which a developer is writing the code and developers will have specific requirements that the designer must adhere to to make everything run smoothly. This is why designers who understand coding will have an easier time. Before going further, I am going to talk a little bit about coding languages for the web (not for mobile apps or other products such as Swift for iOS and Java for Android) but the points I hit on should still apply.

Coding Languages of the Web

There are three major languages that create a web page and, like typical languages, they have their nuances and off-shoots. First, there is Hypertext Markup Language, better known as HTML; second, Cascading Style Sheets, or CSS; third is JavaScript. If you think of the web page as the body, HTML would be the skeleton, JavaScript would be the underlying muscles and CSS would be the skin, clothing, makeup and any other cosmetics.

HTML “describes the structure of a web page” (Unknown). Through this, designers and developers create the building blocks of websites. That include the words that need to be there, the images, links and many other things which are referred to as elements. This allows a website to understand how a page should be arranged.

HTML

CSS, as the name suggests, creates the style of your web page (Morris). Websites don’t only need to have the necessary elements present, they also need to be fashionable. CSS is responsible for “[specifying] your document’s style—page layouts, colours, and fonts are all determined with CSS” (Morris). Simply put, it makes it look good.

CSS

Lastly, we have JavaScript. It is used to add interactivity to a web page. It takes what would be a static page, similar to a book, and transforms it into something visitors to the site can engage with. JavaScript is a “scripting language” which is “used to automate processes that users would otherwise need to execute on their own” (Morris). It is known for adding interactivity to web pages but it is also responsible for creating a lot of mobile apps as well.

JS

Why Learn?

“So, this information is great but why should I bother to learn any of this?” I hear you ask. Well there are a few reasons:

Ease of Communication

Designers need to communicate with developers and nothing makes communication easier than speaking the same language. When you can talk to your developers about how to tackle a problem from both a design and programming standpoint, work will become easier and, hopefully, more enjoyable.

Faster Design and Iteration

When you are designing, you will need to be able to create quickly and with few mistakes. If you create while considering how the design will function, there will be fewer rounds of fixes and you and your team can get to your design goal much faster.

An Ironclad Defense

As a designer, you have to be able to defend our design decisions to anyone, from clients to team members. Understanding the functionality can help you better defend your design choices and help you understand issues that are pointed out to you. Listening to criticism is just as important as giving it.

Bringing It to Life

What if you are the designer, copywriter, developer and office dog-sitter? When you are also required to bring your designs out of your head and into the real world, being able to make that happen by coding them is vital.

How do You Start?

So I have convinced you (fingers crossed) and you want to know where to begin your deep dive into coding for the web and everything else. First, take it slowly. There is no need to know everything immediately (and it’s impossible). However, there are many good resources:

Are you a video watcher? Watch tutorial videos on LinkedIn Learning or Youtube. You can follow along in your favourite code editor. Oh, you don’t have one, well VS Code is my favourite and it is free.

Are you a reader? Read the documentation for HTML, CSS and JavaScript.

Do you just want to sink your teeth in? A website like W3Schools allows you to practice on small chunks of code. Want more of a challenge? Find your favourite or least favourite website and redesign it. You are sure to have a lot of fun!

Do you want to talk to experts? In-person (not a good idea during a pandemic) and virtual meetups, and social media connections are great ways to find experts and ask them for help. Just always be understanding if they can’t help and respectful of people’s time if they do.

As I mentioned earlier, this isn’t mandatory. You can be a good designer without it. However, the thing about staying in your design bubble is that it traps you inside as much as it keeps everything else out. Personally, I think popping the bubble helps you grow past just being a ‘good designer.’

Sources

  • Chen, Winne WT. “Learning to Code — A Designer’s Perspective.” UX Collective, 6 Aug. 2019, uxdesign.cc/learning-to-code-a-designers-perspective-8aa2dfb0e2e.
  • Morris, Scott. “What Is CSS, How Does It Work and What Is It Used For?” Skillcrush, 13 Oct. 2020, skillcrush.com/blog/css/.
  • Morris, Scott. “What Is JavaScript? A Guide for Total Beginners.” Skillcrush, 13 Oct. 2020, www.skillcrush.com/blog/javascript/.
  • Unknown. HTML Introduction. www.w3schools.com/html/html_intro.asp.

Credits

Images by artinspring and WavebreakMediaMicro and Eduardo Flores