Search Input

Creating Interactive Websites with Stand-Out Designs

Graphic Designer, Yunseo Go‌
‌
‌
‌
‌

Class Details

‌
‌
‌

Graphic Designer,Yunseo Go_고윤서 Details

Intro

Class Intro

Graphic Designer, Yunseo Go
Do you want to create a website that accentuates your designs? Then this all new coding class for designers is perfect for you!
A Web Design & Coding Class to Make Your Designs Stand Out!
Dive into the world of "creative coding," and capture the attention of your audience with eye-catching results by combining design, development, programming, and visual arts!

Have you been hesitant to start because programming seems too difficult, or because you lack experience?
Illustrator Zila Li
Based on 7 highly practical and applicable exercises, learn everything from setting up a development environment to building an interactive website with graphics, animations, API, and experimental design, all through an online curriculum crafted from the expertise of graphic designer Yunseo Go, who has been in charge of web design/development for numerous companies and organizations.

Web Design & Coding Glossary

What are HTML / CSS / JavaScript?

In this course, HTML assigns structure and meaning to the web, CSS decorates the appearance on the web, and JavaScript handles browser event processing and manipulation.

What is Visual Studio Code?

It is a source code editor that helps you edit code more conveniently, allowing users to modify the editor's themes, shortcuts, and settings.

Class Perks
Get These Coloso Exclusives

  • Class Perks

    Unlimited Access to All 21 Classes
  • Class Perks

    Original Practice Example Files (fig)
  • Class Perks

    Original Source Code for Practice Examples (HTML, CSS, JavaScript)

Expert Graphic Designer Yunseo Go's Portfolio

  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio

Why Take This Class?

This is not just a web development class that ends with a simple exercise of applying your design on a website. This online class for ""interactive web design/development"" provides an in-depth user experience where users and graphics on the website interact in real-time.

Through this class from graphic designer Yunseo Go, who has been responsible for numerous interactive websites such as Naver, Amnesty, and the Seoul Independent Film Festival, you can directly learn from 7 interactive website examples that combine not only design but also coding, motion, and web publishing. This premium class is perfect for everyone—from graphic designers who want to enter the coding field to current developers who want to develop their design and publishing skills. Check it out on Coloso now!

background Images

7 Class Exercises

coloso Yunseo Go Exercises
Basics of Responsive Web
coloso Yunseo Go Exercises
Web Business Card (Linktree)
coloso Yunseo Go Exercises
Weather Influenced Interactive Poster (Sunny)
coloso Yunseo Go Exercises
Weather Influenced Interactive Poster (Cloudy)
coloso Yunseo Go Exercises
Weather Influenced Interactive Poster (Snow)
coloso Yunseo Go Exercises
Weather Influenced Interactive Poster (Rain)
coloso Yunseo Go Exercises
Web Canvas 01: Creating Your Own Stamp Poster
coloso Yunseo Go Exercises
Web Canvas 02: Creating Your Own Stamp Poster
 
Click on an Image to Check Out Its Website
Instructor

Yunseo Go
Graphic Designer

Hello, I'm Yunseo Go, CEO of Design Studio YYY. I've worked as a designer and developer at the design studio "Everyday Practice." Then later while at graphic web experiment group HHHA, I focused on creating designs that offer a familiar user experience while standing out.

Currently, I produce various products that provide more direct solutions to make interactive websites more widely popular. In addition to development and design, I also share my own experience and expertise through various lectures and workshops.

Background Images
Yunseo Go
Graphic Designer, Yunseo Go

[Current]
CEO of Creative Design Studio YYY
Member of non-profit graphic web experiment group HHHA

[Previous]
Designer/Developer at Graphic Design Studio Everyday Practice
Designer/Developer at Allmytour Corporation

Projects & Awards

[Websites]
Naver Nanum Square Neo (Development)
Cine21 Report (Interaction Design/Development)
SuJangGo (Development)
2021 Seoul Urban Architecture Biennale (Development)
Seoul Independent Film Festival Website (Development)
Seoul Design Festival (Development)
Art Space (Development)

[Exhibitions]
2022 [POST-IT], Same Gallery, Tokyo, Japan 2022.11 [Garden.Local], Boan1942, Seoul

[Awards]
Asia Design Prize 2021, 2022

[Lectures/Interviews]
2022 Typography Society of Korea T/SCHOOL 2022 2022 Monthly [Design] October 2022 Issue Cover and “Rebelling Against Perfection” Section - YYY Yunseo Go 2022 Choi Tae-yoon Studio Interactive Coding Class Artist Talk 2022 It's Nice That 2022 Monthly [Design] April 2022 Issue Filling Design from A to Z, Alphabet Project, HHHA

Instagram
Highlights

Class Highlights

Introduction to Creative Coding Based on Experimental Graphic Design

Learn the concepts of HTML, CSS, and JavaScript to build the framework for website operation, create various sites with interactive elements, and emphasize the design on a website, .

Coloso Yunseo Go Introduction

Mastering the Web Design and Development Process with 7 Exercises

Design an interactive website that responds to user inputs with creative designs, and learn the practical work process step-by-step through 7 diverse examples.

Coloso Yunseo Go Introduction

Understanding and Learning About Digital Interactions

Learn how to implement two-way communication content that is completed through user interaction, allowing graphic design to be freely explored within a web space.

Coloso Yunseo Go Introduction

Class Details
You'll Learn

  • Coloso graphic design Class Details
    Web Development Basics and Applications of Various Interactions
    Learn the basics of web development for designers, HTML, CSS, JavaScript, and discover types and examples of web interaction.
  • Coloso graphic design Class Details
    Responsive Websites According to Device Size
    Learn about CSS units and queries to create websites that are convenient for users on various devices, and learn in screen typography necessary for implementing websites with a lot of text.
  • Coloso graphic design Class Details
    Designing an Outstanding Linktree Business Card and Page
    After extracting design sources in Figma, create a website that displays differently with each visit through various blend modes, animations, and function usage.
  • Coloso graphic design Class Details
    Weather Poster Example with API
    Learn the basic concept of API through weather data, and implement dynamic graphics on the web based on the data received.
  • Coloso graphic design Class Details
    Websites Where Users Create and Share Posters
    Learn about the HTML canvas and make a web canvas. Discover how to host your website and share it externally through Google Firebase.
  • Coloso graphic design Class Details
    Potential and Efficient Development Expertise of Interactive Web
    Explore a variety of contents that can be expressed through interactive web, and dive into the mindset, direction of study, and methods to efficiently shorten development process/time.


(자동 구성) 가격이 인상됩니다.

지금이 최저가!
Curriculum

Curriculum
In-Depth Look

SECTION 01. Intro

01. Identifying Problems with Your Drawings

  1. What is an interactive web, and what can be done on the web
  2. Tools used, introduction to languages we will learn

02. Design Tool and Plugin Installation & Development Environment Setup

  1. Installing HTML Live Viewer plugin
  2. Installing plugins for using CSS preprocessors
  3. Installing Node.js, npm
  4. Customizing the VS Code environment
SECTION 02. The First Step in Web Development: Looking at HTML, CSS, JavaScript

03. Building a Responsive Website 01: Websites with Lots of Text

  1. Analyzing the design file (font size, spacing, grid)
  2. What is HTML: Understanding HTML markup and tags
  3. What is CSS: Connecting CSS
  4. What is CDN: Connecting fonts

04. Building a Responsive Website 02: Websites with Lots of Text

  1. Previewing styles with Inspector (viewing with Figma)
  2. Understanding CSS units (px, rem, em, vw, vh)
  3. Styling with CSS according to the grid
  4. Implementing responsiveness with media queries

05. Building a Web Business Card 01: Websites with Little Text

  1. Analyzing the design file (font size, spacing, grid)
  2. How to export assets from design programs
  3. HTML Markup, Tag Recap
  4. Navigating sites

06. Building a Web Business Card 02: Websites with Little Text

  1. Basics of HTML SVG tags
  2. CSS Keyframe Animation
  3. What is JavaScript, connecting JavaScript
  4. JavaScript variables and functions, and data types

07. Building a Web Business Card 03: Websites with Little Text

  1. Understanding JavaScript Math.random()
  2. Manipulating the DOM with JavaScript
SECTION 03. Building a Website That Responds to Weather

08. Creating a Web Poster That Responds to Weather Using a Weather API 01

  1. Analyzing the design file (font size, spacing, grid)
  2. Applying SVG vector designs to the website as is
  3. HTML Markup 01
  4. CSS Styling 01

09. Creating a Web Poster That Responds to Weather Using a Weather API 02

  1. HTML Markup 02
  2. CSS Styling 02

10. Creating a Web Poster That Responds to Weather Using a Weather API 03

  1. Understanding JavaScript Event Listeners (1)
  2. Manipulating DOM style according to events

11. Creating a Web Poster That Responds to Weather Using a Weather API 04

  1. Understanding JavaScript Event Listeners (2)
  2. Creating and deleting DOM according to events

12. Creating a Web Poster That Responds to Weather Using a Weather API 05

  1. Understanding APIs, and json
  2. HTTP Request Method
  3. Receiving weather information with the OpenWeather API

13. Creating a Web Poster That Responds to Weather Using a Weather API 06

  1. Implementing visuals according to the API
SECTION 04. Creating a Web Canvas and Building a Website for Sharing Images

14. Creating a Web Canvas and Sharing Images on a Website 01

  1. Analyzing the design file (font size, spacing, grid)
  2. Installing and operating Firebase
  3. Setting up and deploying Firebase Hosting
  4. HTML Markup
  5. CSS Styling

15. Creating a Web Canvas and Sharing Images on a Website 02

  1. HTML Markup
  2. CSS Styling
  3. Connecting JavaScript

16. Creating a Web Canvas and Sharing Images on a Website 03

  1. JavaScript Event Listener
  2. JavaScript and HTML canvas

17. Creating a Web Canvas and Sharing Images on a Website 04

  1. JavaScript and HTML canvas (2)
  2. Saving images from HTML canvas

18. Creating a Web Canvas and Sharing Images on a Website 05

  1. Setting up Firebase Cloud Storage
  2. Uploading images to Firebase Cloud Storage

19. Creating a Web Canvas and Sharing Images on a Website 06

  1. Retrieving data from Firebase Cloud Storage
SECTION 05. Epilogue: At the Crossroads Between Designer and Developer

20. Appendix

  1. Organizing and managing code files
  2. Setting up the environment for each work folder by changing settings.json
  3. Other tips

21. Introduction to Study Direction

  1. Examining the structure of different interactive websites
  2. Looking at paths and directions for learning web development

*The release date of this class, curriculum images, and associated content can be changed without prior notice.
** Class videos may be seperated for a more streamlined viewing experience

Interview with
Graphic Designer Yunseo Go

Background Images
Question.01
What do you think your strength is in the “web design” field?

I work in both the realms of design and web development simultaneously. Understanding the way websites work and modes of communication with users allows me to consider both the typical user experience and areas that stand out. Having held both positions in practice, I can offer knowledge on what capabilities each area requires and how to create standout interaction designs.
Question.02
What is special about this course?

This course focuses on unique graphic design and the practical creation of websites that make it a reality. It covers understanding and usage of digital device interaction, as well as in-depth aspects of web development from the basics to the use of APIs. Even those new to coding will be able to create their unique websites and experience the development stages of researching and applying interactions themselves.
Question.03
What would you like to say to the students?

As various digital devices become more widespread, the domain of interactive websites is expanding beyond static designs.Instead of constructing websites under fixed templates, launching of unique and distinctive websites is now in progress. This course will guide you right from the beginning to make your designs a reality, becoming a unique and appealing tool for you to utilize.

Required Programs

This course will use
- Figma 2022 (116.4.4.)
- Visual Studio Code
- Adobe Illustrator 2023
- Node.js 18.12.1
Please purchase and install these program(s) for an optimized lecture experience.

* Previous versions of Figma can be used, but jNode.js Version 15 or higher must be used.
* An Adobe license is required to utilize Adobe Typekit, but the class will cover how to embed other fonts or use system fonts.
*These programs and/or materials will not be provided with the lecture.

Fusion360, Keyshot, adobe photoshop, adobe illustrator
Recommended

Recommended Class
Like this class?
Then check these out!

[IMPORTANT NOTICE]

*Please note that the information on this page is subject to change without prior notice.
*Would you like to learn more about our refund policy? Please check here.
*Please check our FAQ for Copyright and Proprietary Rights, User-Generated Content, Security, and Violation information.