Web design for Kim Eull

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.

 

About page

About page

 
 

Work list page

Work list page

 
 

Contact page

Contact page

 
 

 

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

 


Table of contents

Step 1. IA (Information Architecture) & wireframe

Step 2. Research references

Step 3. Discussions with the client and developer

Step 4. Prototyping

  • ∙ Design in Figma, preview in Codepen
  • ∙ Design kits (styles, components and patterns)

Step 5. CMS – WordPress

What I learnt …

  • ∙ CSS sprite sheet animation with PNG
  • ∙ CSS grid
  • ∙ Understanding React

Wrap-up

 


Step 1. IA (Information Architecture) & wireframe

IA (Information Architecture)

IA (Information Architecture) for Kim Eull’s website

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:

Before: categories are in the header navigation 2015

After:

After: user can sort their interest using tags. 2023

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.

Handwriting wireframe
Wireframe in Figma
Wireframe: main page detail
Wireframe: content page details

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

High-fidelity prototyping in Figma

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
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
Design kit

Step 5. CMS – WordPress

Attempted with Hygraph and Strapi but went with WordPress.

Hygraph

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.

CSS sprite sheet animation

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

2. CSS grid

Galaxy, Installation, Kim Eull, 2016
Galaxy, Installation, Kim Eull, 2016

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.

Final CSS grid for Galaxy shape

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.

Preview CSS Grid with CodePen
Display the final CSS Grid on the website

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

 

3. Understanding React

React structure

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.

 


How do you feel? by Anthony Browne

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. 🧙🏻‍♀️

 

Thanks for reading,
please share it.
Related
UI: Card state styles
UI: Card state styles
state style
UI/UX
article
card component
accessibility
Interactive web design for Artist Kwak
Interactive web design for Artist Kwak
case study
accessibility
Micro interaction
UX/UI