Case study: Artist Kim Eull’s portfolio website

Case study: Artist Kim Eull’s portfolio website

Hello Codesigners!

It’s been a long time since I published my last article. I hope everyone is healthy and safe. Many things happened to me over the last 3 years.

I’ve been on maternity & parental leave for the last 3 years, and my daughter has started childcare and settling in well now. So finally, I can go back to work, hooray 🙌 Also, I respect all pregnant women, moms and dads. 👍

This is the first project since I came back from parental leave. I needed to warm up and touch base on the design and coding.

About Kim Eull

Kim Eull (1954 ~) is a contemporary Korean artist. The drawings of Kim Eull hold an expansive spectrum encompassing various genres including painting, sculpture, installation, etc.

🔗 Kim Eull

About this project

∙ Project duration: 2 months (Jan ~ Feb 2023)
∙ Design and communication tool: Figma
∙ CMS (Content management system): WordPress
∙ FrontEnd: Next.js
∙ Focus: Displaying gallery (image), searching for information

Step 1. IA (Information Architecture) & wireframe

IA (Information Architecture)

On his old website, the IA was divided by work genres such as Painting, Drawing and Object but I found that this structure didn’t work well. Because Kim Eull’s work is not limited to only a specific genre, but his work expands a variety of genres such as drawing, object, painting, installation and publication and many artworks include different genres together.

Therefore, I decided to make a use of tag/filter system instead of the menu category for the main navigation.

Before:

After:

In this IA stage, I always had those questions in mind.

∙ How to classify information?
∙ How can users find the information efficiently and quickly?
∙ How to reduce the interaction costs?

Wireframe

Based on the IA, I drew a wireframe by hand first and then moved to Figma.

Step 2. Research references

Based on the wireframe, I started to research practical examples that can be implemented with code.

Here is the Gallery Pattern references.

Step 3. Discuss references with the developer

I discussed the below list with the client and developer with the wireframe and design references.

∙ time budget
∙ the overall structure of the website
∙ user workflow (navigation)
∙ layout (large, medium, small)
∙ micro animation and state
∙ flexible uploading system
∙ technical issues

Step 4. Prototyping

Design in Figma, preview in Codepen

Based on the wireframe (low-fidelity) along with the design references and the discussions, I designed the high-fidelity in Figam.

Figma is an amazing prototyping and interface design tool. Though I prefer to check my design in the real browser/device (Chrome) in CodePen over the Present View in Figma. In Figma, it’s hard to visualise my design on the different browser sizes as well as animation effects. If there is any good way to preview prototyping in Figma, please let me know. 😉

Preview with CodePen (Landscape/large frame)

Preview with CodePen (Vertical/small frame)

Design kit

After finishing high-fidelity prototyping, I organised the design kit to share with the developer.

∙ Typography
∙ Colour
∙ Components
∙ Patterns
∙ Colour contrast: at least WCAG 2 AA
∙ CSS element state: hover > focus > active

Step 5. CMS – WordPress

Attempted with Hygraph and Strapi but went with WordPress.

Ryan (Developer) initially used both HyGraph and Strapi to manage the content as he wanted to make use of GraphQL to fetch data.

But there were two big issues with them.

∙ HyGraph — Limited number of uploaded images within a free plan
∙ Strapi — Expensive server costs (tried with GCP — App Engine)

Both were related to the cost but the client didn’t want to spend too much money on the server so we decided to go with WordPress on Amazon LightSail and deployed the FrontEnd (Next.js) to Vercel.

What I learnt 💪

I learnt 3 codesign skills from this project.

1. CSS sprite sheet animation with PNG

There are a lot of heavy images on this website, so I made a loading animation with CSS. So instead of showing heavy images loading, this short loading animation will be displayed while fetching the heavy images which provides a delightful experience for users.

Here is the technical article for the CSS sprite sheet animation.

2. CSS grid

Galaxy is one of Kim Eull’s signature artworks, and it was installed with Kim Eull’s 1,450 drawings. When I saw this installation artwork, I wanted to bring it online as is. When I saw it the first time, I thought I could visualize it using CSS Grid easily. But it was harder than I expected to make the Galaxy shape with 1,450 drawings 😅.

The first draft CSS grid for Galaxy shape

The above drawing was my first attempt to make the Galaxy grid but it didn’t work as expected.

So I researched more on the CSS Grid techniques.

After researching CSS Grid, I found the best way to create the Galaxy shape using CSS Grid. Please check this article for more details. Below is a snapshot of the article.

Display the final CSS Grid on the website

Here is the technical article for the Galaxy layout with CSS Grid.

3. Understanding React

React is one of the most popular frameworks and it is used in many companies. I wanted to know how I can design products (websites) to be compatible with React, especially UI components more efficiently and flexibly.

I wrote a note about Understanding the basics of React if you want to read more.

Wrap up

Understanding those techniques (CSS, JavaScript and React) gave me opportunities to design components and pages more efficiently and it helped this project to provide a better user experience for the users but also a better coding experience for the developers too.

I feel confident

I learnt a lot from this project and it gave me a great chance to get my design sense back on track from the absence of parental leave. I enjoyed this project.

💌 Any feedback or challenge

I would love to hear your feedback on how I can improve this article. Please leave me a comment below or on Twitter.

🎈 That’s all for now

Please stay tuned and gives me love (👏) if you liked it. Thank you.

Happy Codesign today. 🧙🏻‍♀️

Case study: Artist Kim Eull’s portfolio website