Case study: web design focused on interaction design.
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
- 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.
- 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.Filtered by:
Title
Title
Title
Title
Title
Title
Copyright
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
📚 Link
Website Collections
Prp 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
- Colour
- Typography
- Motion graphic
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.
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.
- categories: H1 to H6, body, caption, button
- attributes: font-family, font-size, font-weight, line-height
- value: #404040 (colour) , 300~700 (font-weight), 32px (line-height)
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 Yu is making great tutorials for each technique used on this website. Please stay tuned, Ryan Yu’s FrontEnd30 🤩
- 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 prototyping 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. 🙏
📚Resources
🏃🏻♀️Go to website
Articles
- Combining the Powers of SEM and BIO for Improving CSS.
- Motion graphics vs. animation: what’s the difference?
- Website Information Architecture: How to Optimize for UX | CXL
Design system
Colour contrast checker for accessibility
Interactive frontend course
💌 Any feedback or challenge
I would love to hear your feedback on how I can make this article better for you. Please leave me a comment below or Twitter.
🎈 That’s all for now
I will be back soon with the article Case study: web design focused on dark theme UI. 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. 😃
