Case study: web design focused on interaction.

Hello, codesigners. ๐Ÿ˜ƒ Today I would like to share the web design case study of an artist, Nam Sin Kwak,โ€™s portfolio website.

Nam Sin Kwak (born 1953) is one of the famous contemporary artists in South Korea. His recent work includes silhouettes, installation art, and printmaking.

Foreword

I always wanted to design a website using the latest web technologies, WebGL, SVG animation, and so forth. You may agree that it is not always easy to apply new technologies when building websites, and also we have to consider various factors such as a lot of different devices, browsers and the Internet speed.

Moreover, there are sometimes only a few pieces of information about new technologies available and we have to find/follow best practices with conducting continuous QA test.

Nevertheless, I finally finished the project and throughout this article, I will share the design process with the technologies used.

P.S., there are a lot of heavy GIF images in this article, so if your internet speed is slow, the images may load slow.

Contents

Step 1. Understand what the client needs are

Step 2. IA (Information Architecture) & wireframe

Step 3. Research references

Step 4. Discuss references with a developer

Step 5. Prototyping

  • โˆ™ Layout

  • โˆ™ Colour

  • โˆ™ Typographic (Language)

  • โˆ™ Motion graphic

Step 6. Development

Step 7. QA (Quality Assurance) test

Wrapup

Reference

Step 1. Understand what the client needs are

First of all, I needed to know what problems the client had and what he needed through his website. During the first meeting, I found three reasons why the client wanted to change his website. And then I gave him solutions for each.

FrontEnd30

โˆ™ Too complicated โ†’ Consistent design guideline

As you can see image above, there were 10 categories in the navigation bar. Also, each category (page) had different design styles such as typography, colour, a layout, and those provided an inconsistent user experience. So the client and I decided to reduce the number of categories and create new design styles which provide a consistent user experience.

โˆ™ Not friendly to all devices โ†’ Responsive website

The previous website had only one layout for all different browser sizes. It was not friendly at all to all devices; too small on the 32-inch monitor and hard to click buttons on the mobile devices. I recommended the client to make a responsive website to fit the layout in all devices.

โˆ™ Updating content problem โ†’ WordPress CMS

My client had someone managed a website in the past, but the client found it difficult to upload new content anytime he wants. So I suggested him WordPress CMS (Content management system) that allows a client to manage the creation and modification of content by himself.

Step 2. IA (Information Architecture) & wireframe

For this step, I tried to minimize the number of categories to provide a simpler user experience. I categorised pages with similar types and reduced it down to five categories: home, about, work, article and contact. Here is the IA of the new website.

After completing IA, for the wireframe, I spent time to decide where to add each component on what page. At this stage, I was focusing on structuring high-level design architecture which I will discuss further with a developer.

Step 3. Research references

Based on IA and wireframe, I researched many references from the real-world product which was already coded. In my opinion, if the design is not able to work in the code, it might end up throwing away. So I always look for a feasible reference and learn code too. 

I codified references for this project below:

Codepen Collections

๐Ÿ“š Page transition

๐Ÿ“š Link

๐Ÿ“š List animation

๐Ÿ“š Mouse cursor effects

Website Collections

๐Ÿ“š Web design reference

๐Ÿ“š List animation reference

๐Ÿ“š Mouse cursor effects references

 

Step 4. Discuss references with a developer

After finishing the research, I shared IA, wireframe and references with Ryan Yu who was the frontend developer. Sharing those resources together, we decided which technologies to apply to the project.

 High-level architecture

  • Browser compatibility: We targeted all the major browsers including Chrome, Firefox, Safari, Edge and IE 11 on desktop, and Chrome, Firefox, Safari on mobile devices.
  • Responsiveness: We have mainly focused on the content responsiveness meaning we applied the media queries whenever it is required for each component. On top of that, we had the page level responsiveness which was based on the four different browser sizes such as small, medium, large and extra-large.
  • WebPageTest: WebPageTest provides various website performance results such as the first-byte time, compress transfer, effective use of CDN etc. We always enabled gzip to improve the site speed.
  • SEM & BIO: The principle of the development was based on SEM & BIO.  

Specific technologies

  • Mouse cursor
  • SVG animation
  • Side navigation interaction
  • Font fill motion
  • Magnetic motion
  • Magic line motion
  • page transition
  • Barba
  • WebGL

Step 5. Prototyping

Based on our decision which technologies we were going to use, I started to do prototyping by following the list below.

Layout

As per our decision on the responsiveness, I started by making 4 different page-level layouts, X-Large, Large, Medium and Small in the Sketch App like the image above.

Use actual devices as I design for prototyping 

I prefer to previewing on the actual physical devices such as desktop, tablet and mobile phones. For instance, of course, I could see the preview window of the Small layout in the big (e.g., 32-inch) monitor, however, it was hard to know how the end-user would feel the actual information density on the physical device such as font-size, line-height, margin and white space. So I use Sketch Mirror app that allows you to preview your designs and prototypes on the actual iOS devices.

This is my usual prototyping with 4 different devices for the preview:

X-large: 2600 ร— 1400px for 4K LG monitor, 32 inch

Large: 1400 ร—1024px for MacBook, 13 inch

Medium: 768 ร—1024px for iPad, 7.9 inch

Small: 320 ร—568 for iPhone SE

Define layout as large, medium, small instead of a desktop, tablet and mobile

I used to define the layout size like desktop, tablet and mobile. Recently, however, I started to define them as Large, Medium, Small because there are so many devices which have different viewport sizes. For example, the latest iPad Pro has a 12.9-inch screen, 2732 ร— 2048 px resolution which will be categorised as x-large, but NOT desktop if I were to use my old definition.

Therefore, I found that the boundary of the devices became collapsed and as a result, I was not able to say if a specific layout is for desktop or tablet or mobile anymore. In this regards, it makes much more sense to use large, medium or small for the layout.

Colour

Primary colour #404040

I chose the grey (#404040) colour as a primary colour. It was because many of the clientโ€™s artwork was a silhouette on the grey colour. And also I wanted to have users attention more on the artwork images and didnโ€™t want the primary colour distracting it.

Secondary colour #e46c6e

The secondary colour came from the Korean traditional stamp. In Korea, the traditional stamp is called Dojang and it is used in places signatures or to sign artist work. Traditionally the ink colour of the stamp is used in red. I believe that the artistโ€™s signature is important to prove their artwork and that is the reason I chose the secondary colour from the stamp.

Colour Accessibility

When choosing the colours, checking web accessibility is an integral part. I usually go to Colorable website to check the colour accessibility. Thanks to Brent Jackson. The original stamp colour (#ea543b) was failed in web accessibility in the primary background colour (grey, #404040) like below.

So I changed the lightness of the secondary colour from 57% to 66% and saturation from 81% to 69% to pass web accessibility.

AA Large contrast may not be enough for someone who has colour blindness but if I changed the bright in order to get AAA contrast, the secondary colour would be failed in the white background like below. 

So I decided the secondary colour #e46c6e and tried to give a larger font size if possible (18.66px and bold or larger, or 24px or larger).

Letโ€™s move to typographic. 

Typographic

Typography is the part I care the most. I spend a lot of time to polish every fine detail of Typography based on the web standard. To do this, I research a lot on what to do or not to do in the two design system guidelines, Atlassian design and Material design system. Thanks for sharing valuable information. 

Let me break it down. I frequently resorted to looking at standard in the Material design library Sketch file and see how they manage to name so many symbols, components and layers.

Also, I referenced how they present many states (disabled, selected, hover) and how they combine each element or each component. Especially I adopted the type system, H1~H6, subtitle, body, caption and buttons like the image below. 

The type system in Material design guideline โ’ธ Material design system at google
The type system in Material design guideline โ’ธ Material design system at google

I was inspired by Material design, however, probably due to the limitation of Sketch, I felt a lack of something which I wanted to do polishing more such as changing properties to each text element as their individual roles in Sketch. I found a nice solution and explained it as follows.

How to design each element efficiently for their individual roles in Sketch.

Even if Sketch has a symbol-function, I found that it is not as flexible as writing the code. For instance, There were two paragraphs, overview and CV, in Sketch file like the image below.

Both contents are included in the body category. But the line-height property must be different due to the content type, the line-height of the overview content is taller than the CV content. Because overview content is a long paragraph that needs more space between each line for better readability than CV content.

I always think about how to write the code as I do design. 

I already knew Ryan Yu, front-end engineer, prefers to using OOCSS (Object Oriented CSS) like the image below, also I love this way which allows us to combine or change each property easily with CSS classes. Here is an article Ryan Yu wrote in CSS-tricks, Combining the Powers of SEM and BIO for Improving CSS

It must be much easier if I could just write code using OOCSS. But I had to hand over the prototyping to engineer with Sketch file as a designer. As I mentioned before Sketch is not flexible. It doesnโ€™t allow me to override styles (properties) as opposed to OOCSS or style sheets in Adobe product. (if there is an overriding style function in Sketch, please let me know.๐Ÿ˜ƒ) 

I found that solution in the Atlassian design guidelines. 

It specified extra properties for an individual content which has different rules like the image above. So I decided to add extra properties to each individual element. 

After finding the solution, I re-organised my own type system in Sketch file like below. 

First of all, I defined the basic properties of an element with categories, attributes and value. 

And then whenever I needed some extra or override properties to some specific content, I made another symbol with updated properties from the basic properties and then I arranged them beside the basic properties to find their hierarchy easily. Also, I have added all other information such as where it was used and which properties were changed in the extra properties. 

I intended the type system to find properties easily like above. I donโ€™t want to say this is the perfect solution yet and I keep updating my type system. 

Motion graphic

I am relatively a beginner on motion graphic. This is one of the few projects I designed using many motions for web design. I really wanted to improve these skills in the code too like Arya Stark. Feel free to look at the motions below.

Handwriting Animation with SVG

To make the handwriting SVG animation, I had to make the SVG image in the Adobe Illustrator. I already wrote an article about Handwriting Animation with SVG here.

Canvas effect: WebGL

While I was researching on websites which had a canvas effect (WebGL), it looked like real fabric canvas. I found this technique seemed to suit for client’s artworks. So I immediately chose it as the main technique.

Side navigation

In this project, one of my favourite motion graphics was the side navigation in the List pages. It allows users to see how much they have scrolled down on the page. I believe it provides the users with a delightful experience. As you can see the image above, I fixed the side navigation to the height 60% (height: 60vh) and moved 20px to the left. 

Font-fill motion

 

This is a kind of hover effect. I tried to write the code snippet down with every single detail I can in Sketch file. This way it provides much clear detail to the engineer and explains what I really wanted to achieve with the motion graphic. It provides better communication with the engineer and of course, I always discuss more capabilities in code with the engineer before designing the motion graphics. 

 

 

Step 6. Development

Ryan made great tutorials for each technique used on this website. Please check it out below:

  • โˆ™ Mouse cursor
  • โˆ™ SVG animation
  • โˆ™ Side navigation interaction
  • โˆ™ Font fill motion
  • โˆ™ Magnetic motion
  • โˆ™ Magic line motion
  • โˆ™ Page transition
  • โˆ™ Barba
  • โˆ™ WebGL

Step 7. QA (Quality Assurance) test

After finishing the development, me as a designer always wanted to be involved in the QA test so I can make sure the website was built as designed and it can ensure to provide great user experience as I (or our team) planned at the very beginning of the project.

We conducted the QA test as below:

  • โˆ™ Visual testing
  • โˆ™ Speed performance
  • โˆ™ Browser support
  • โˆ™ Lighthouse

 

Wrap up

It was almost a 4-month project. Throughout this project, I found 3 areas that I should improve in the next project.

Responsive design

There are uncountable device sizes, from mobile to a giant TV, and even refrigerator. Even if I canโ€™t have a complete consistency for each device, I should provide a better responsive and accessible experience to all devices.

Slow Internet speed 

For Artist portfolio, I wanted to make a website with super high-quality artwork images at first. When I was doing QA test, I realised that my thought was not practical. Because it didnโ€™t work well in the slow 3G speed. I should have thought about the end-user who has a slow Internet speed. Having realised, it was too late to change the design, so we decided to use low-quality images instead of high-quality images.

I am researching on this and would like to provide a solution to my next project; such as display low/high-quality images based on the Internet speed and devices.

Learning code more

The more coding I knew, the much easier I would have designed. Because I donโ€™t have to think about the feasibility of prototying or the possibility in code. Moreover, I could just write a PoC (Proof of concept) in code and see if my suggested idea will be working in code without engineers help.

 

One more thing

In my opinion (and from my experience), each content should present its purpose well. For example, CV content should provide information about CV well. To do that, each content should be designed uniquely in order to provide the details of its purpose on that page.

On the other hand, I found that having a unique design for each content could make too many variables and cause engineers to take more time and effort.

It is always my dilemma and I always feel like standing on a crossroads. Do you have a similar experience? How do you do then?

Thanks for reading my 4-month journey. ๐Ÿ™

 
 

๐Ÿ’Œ Any questions or feedback

I would love to hear your feedback on how I can make this article better for you. Please leave your comments below or through my Twitter.

๐ŸŽˆ Thatโ€™s all for now

I will be back soon with the article Case study: web design based on a Material design dark theme. At the moment, Iโ€™m redesigning my website based on the dark theme. Please stay tuned and gives me ๐Ÿ‘loves if you liked it. Thank you. ๐Ÿ˜ƒ 

 

Thanks for reading,
please share it.
Related
UI: State styles of card component
UI: State styles of card component
ui
article
The story of editorial design for book ยฒ/โ‚‚: The Art of Toy Story 4
The story of editorial design for book ยฒ/โ‚‚: The Art of Toy Story 4
Print
Editorial
The story of editorial design for book ยน/โ‚‚: Cookbook
The story of editorial design for book ยน/โ‚‚: Cookbook
Print
Editorial