Graphic designer, Haneul Park_그래픽디자이너 박하늘 Details
Experience the entire process from the initial stage to clear planning, easy design using Figma, simple and clear publishing process, and CMS* construction for efficient management.
A website that is easy to archive and is full of your personality is another portfolio you can have as a designer.
*CMS (Contents Managing System) is a content management system that makes data management and updates convenient.
Graphic Designer Haneul Park's Portfolio
Graphic design
Web design
Why Take This Class?
When creating a portfolio website, if you focus only on usability, the website will easily become boring, and if you only emphasize visual impact, the website will end up being difficult.
If you want to create your own website that balances usability and fun, that is, it is easy to update on a regular basis while also attractively displaying your portfolio,
Follow along step by step from the planning stage to final implementation through friendly explanations and three specific exercises tailored to the level of designers who are not familiar with coding.
3 Class Exercises
Part 01. Website Design Made with Figma
-
Website design made with Figma: Desktop ver. -
Website design made with Figma: mobile ver.
Part 02. Final Implemented Website (From Publishing to Hosting)
-
Final Result
* The results above are actual examples that will be created directly in the class.
graphic designer
Haneul Park
Hello, this is graphic designer Haneul Park.
I currently work as a UI designer at Studio Barton, working on websites for brands in various fields.
At the same time, I am working as a freelance designer, working through various media both online and offline, including graphic design, exhibition design, and website design and implementation.
Rather than relying on pre-made templates, we hope you will create a unique portfolio website tailored entirely to your own content.

Graphic Designer
Haneul Park
[Current]
Studio Barton UI designer
Freelance designer
Projects & Awards
[Participated Projects (Studio Baton)]
‘Facade Pattern’ website design 2022
‘More Vision’ website design 2022
'Magazine B' website design 2022
‘Osulloc Brand Story & Dada Daily Life’ Website Design 2021
'HEIGHTS' website design 2021
[Participated Projects (Freelance)]
‘Walking without legs’ graphic design 2022
'Look Who's Talking' Website Design and Development 2022
‘Upperhouse VIP Lounge’ website design and development 2022
'SMile Music Festival' Graphic Design 2022, 2020
'Clock Hands' Graphic Design 2022
'Eugene Jung' website design and development 2022
‘Seoul Newspaper Interactive Article’ website design and development 2022
'Name March' website design and development 2020
Class Highlights
Creating a Sustainable Portfolio Management System
Organizing your portfolio is something you always put off. Create a sustainable and easy ‘media-specific portfolio management system’ by structuring it through your website.
Even Beginners in Coding Can Learn Production Know-How Through Practice
Even those who are new to coding or have hit a coding wall will soon be able to complete a website by following the steps from planning to final hosting.
Portfolio Website with Your Own Identity
Creating a website with a template is convenient, but at the same time, it looks uniform, like an apartment. Learn how to create a website like a single-family home with your own personality and structure without a template.
Class Details
You'll Learn
-
Planning a Website That Expresses IndividualitySet the purpose and direction of the website and create a wireframe that takes appropriate usability and individuality into consideration. -
An Introduction to Figma That Can Be Learned by Following Along.Understand how major functions such as Figma's frame and auto layout work and quickly learn basic functions through hands-on examples. -
How to Create a Detailed PrototypeWe will look at useful prototyping functions and tricks and learn how to create a detailed prototype that is close to the website that will actually be implemented.
-
Responsive Website Structure DesignWe will look at a responsive website structure that operates flexibly in device environments of various ratios and sizes. -
Create Your Own WordPress ThemeCreate your own WordPress theme with the design you want relatively simply, without using a builder or theme. -
Portfolio Content Processing Method by FormatLet's look at tips for processing content when posting your portfolio in various formats, including Instagram, websites, and PDFs.
Interview with
Graphic Designer Haneul Park
What are the key points of this lecture?
This is the part where you explore your portfolio from various angles and establish a continuous and easy update system that matches your portfolio. I also think that it is an important point to be able to experience, albeit broadly and thinly , the entire process required to create a website, from design to implementation, and to learn an implementation method with a high degree of design freedom without using ready-made templates or themes.
What do you think the instructor’s strengths or differences are?
I mainly worked in graphic design, but when I happened to work as a UI designer, I was able to develop a sense of form following function. I believe that my strength and differentiation lies in the experience of designing and implementing a website that is both moderately usable and fun from beginning to end . In the table of contents covering Figma, we would like to share an efficient yet free website design process to control appropriate usability and fun.
What can students gain from the lecture?
I hope that you will develop the habit of continuously organizing and showing your work process and results, and that you will create your own archive as a result. Because a well-organized archive helps both directly and indirectly. Additionally, website design and implementation is not as difficult and fun as you think, right? I hope that you can get some sense of whether you want to learn more .
Required Programs
This course will use
- Figma Desktop App version 116.2.4,
- Visual Studio Code 1.71.1,
- MAMP 6.6,
- FileZilla 3.56.0
Please purchase and install these program(s) for an optimized chapter experience.
*These programs and/or materials will not be provided with the chapter.












