Frontendly.io is an online learning platform designed to help frontend developers grow their skills and advance their careers.

Overview

• Timeline: October 2024 − 2025
• Role: Product Designer & Co-founder
• Key Responsibilities:
  - Led design system development
  - End-to-end website design
  - Conversion-focused sales page design
  - UI design with a focus on online learning experience
• Tools & Technologies:
  - Project Coordination: Trello, Notion, Slack
  - Design & Content Creation: Figma, Adobe Illustrator, Filmora, CapCut
  - Development Stack: React, Next.js, WordPress

How it all started

Five years ago, I created an open-source CSS selectors cheatsheet that unexpectedly grew to over 2,000 subscribers. This organic growth sparked our belief that I had discovered something valuable that could evolve into something much bigger.

That early success became the foundation for Frontendly.io. We planned to launch with the CSS Selectors course first, followed by a series of additional courses including CSSpresso, FE Bootcamp (focused on portfolio building) and other specialised frontend skills.

To support this growth and ensure consistency across all our educational content, we developed a robust design system that now serves as the backbone of our platform’s user experience.

Our goal: focused on learner outcomes

Target Audience

Frontend developers who want to level up through hands-on, project-based learning that builds skills and career confidence.

Our Mission

To create pivotal moments of clarity and confidence for self-taught developers navigating their learning journey.

We built Frontendly.io around three core principles:

• 🕹️ Accessible & enjoyable: Learning complex frontend concepts shouldn’t feel overwhelming.
• 🚀 Empowering: Developers can master modern tools without the anxiety of falling behind industry trends.
• 🌟 Stand out from the crowd: Learn the skills and mindset that make you shine in today’s competitive frontend landscape.
• 🫶 Supportive: Building a community where learners know they’re not alone in their journey.

📈 Success Metrics

We measure impact through meaningful indicators tied to real learner outcomes:

• Conversion to paid courses
• Course completion and engagement rates
• Social media content sharing
• Learner satisfaction and feedback
• Career advancement tracking

Observe: understanding the learners

User research: To gain a deep understanding of our learning community, I analysed feedback from over 2,000 CSS Selectors email subscribers, reviewed insights from past courses, and actively participated in discussions within the Daily.dev developer community.

Key insights discovered

• Confidence gap: Learners understood the theory but lacked confidence when applying it to real-world projects.
• Impostor syndrome: Many felt they were falling behind and believed others saw them as more skilled than they were, leading to hesitation and burnout.
• Engagement challenge: Learners wanted the platform to feel more human and relatable, rather than cold or purely transactional.

Reflect: from research into prioritised actions

This process involved two key steps:

• Step 1: Collect assumptions and questions
• Step 2: Plot on risk vs certainty matrix

Based on our risk assessment, we identified key design decisions to address our top-priority assumptions.

Priority Actions:

• Search-driven video play list UI
  Redesigned the course interface to prioritise search and on-demand learning over linear progression.
• Video structure including:
  - Fundamentals: Concept and syntax
  - Application: Real-world examples with live demos
• Course Progress Tracker UI
  Provides learners with real-time feedback on their completion status and encourages continued engagement.
• Quiz: knowledge checks

Make: from prototypes to validation

Step 1. IA (Information Architecture)

I began by identifying users’ top tasks and goals. From there, I grouped related content based on user expectations — not what I wanted to show — and defined clear paths for ‘global’, ‘public’, and ‘members-only’.

This task-driven approach helped shape an intuitive, goal-oriented information architecture that reflects how real users navigate and learn.

Step 2. Wireframe & low-fidelity prototype

Based on the information architecture and research, I first collaborated with the team to sketch hand-drawn wireframes. This helped us quickly align on layout ideas and content priorities. Once aligned, I translated the sketches into low-fidelity prototypes in Figma to explore structure, hierarchy, and user flow more clearly.

Step 3. Development priority flow

Based on our information architecture, I established a development priority flow — starting from global components to member-only features — which allowed us to build the design system alongside product development.

Component Categorisation Strategy:

• Global: Essential elements used across all pages
• Public: Content components for general users
• Member-only: Personalised features accessible to authenticated users only

Step 4. High-fidelity prototype with the design system in mind

Multiple Perspectives:
- A delightful user experience
- A scalable system foundation

I began by researching real-world UI components to validate practical design patterns. Based on these insights, I built the high-fidelity prototype and design system in parallel. As mentioned earlier, we had plans to expand the brand with additional courses — so scalability was essential from the start.

Let me walk you through the high-fidelity prototype process using the video content list as an example:

Research Scope
Analysed video course interfaces across 4 major e-learning platforms (edX, Deeplearning.ai, Udemy and Khan Academy) to identify design patterns and opportunities for Frontendly.io differentiation.

Key Findings

• Navigation Patterns: Implemented search-first navigation for immediate topic access
• Mobile Experience: Designed mobile-optimised layouts ensuring cross-device consistency
• User Engagement: Created video structure (fundamental + practical) with clear visual distinction

This research directly informed our search-driven learning approach, enabling developers to instantly access specific CSS selectors instead of following traditional linear course sequences.

Other UI research collection
This UI research covers key flows including navigation, sign-up, appearance settings, checkout, and pricing. It was used to inform design decisions through pattern comparison and benchmarking.

This is the outcome of the high-fidelity prototype and design system.

Final Design & Key Outcomes

🎯 Search-driven video play list
Unlike traditional linear courses, ours is built around real developer needs. Developers can quickly search for what they want to accomplish and get targeted solutions without having to go through everything sequentially.

✅ Accessibility in mind
I carefully designed all UI elements to support accessibility across various states — active, hover, and focus — in both light and dark modes, ensuring usability for keyboard and screen reader users.

📈 Course progress tracker UI
This video course list includes two levels of progress tracking:

• Section completion: Small milestones that celebrate progress within each module
• Course completion: A major milestone that marks the full journey

These layered achievements motivate learners and encourage continued engagement throughout the course.

📱Mobile first design

🛒 Sales page design strategies for conversion

• Focused & Responsive Hero Section
  Removed distractions like navigation bars and appearance toggles to keep the spotlight on the message and CTA. Designed to adapt seamlessly across all devices — desktop, tablet, and mobile — for a consistent, conversion-focused experience.

• Hook with a fear-to-solution start
  Begin by addressing common struggles developers face with CSS selectors, then offer a clear, confidence-building solution.

• Persistent CTA placement
  A fixed “Buy Now” button at the bottom ensures action is always one tap away, no matter where users are on the page.

• In-Page video previews
  Embedded sample videos let users preview course quality without leaving the page — this builds trust and reduces bounce rate.

• Frictionless flow with focused storytelling
  Problems ➞ Value ➞ Content ➞ Price

📐 Building scalable design systems

I developed the design system in close collaboration with frontend engineer Ryan Yu, guided by these 5 core principles:

I documented my design system journey on UX Collective, exploring the challenges and breakthroughs of implementing Figma’s variables feature.

👉 Read the full article here: “Optimising your design system with Figma’s variables”

Final design system version 1 (2024)
The complete design system library and documentation created in Figma includes:

💡 What I Learned

Business Mindset

Starting Frontendly.io, I had no business background. I’ve since learned to connect design decisions to business goals, communicate value effectively, and think strategically to support user growth.
Next step: collaborate with talented people in marketing and sales to gain diverse perspectives and drive better outcomes.

Fast Fail, Fast Learn

We spent nearly 6 months building the Frontendly.io website and creating 70+ CSS selector videos without user feedback — a costly lesson in building before validating.

Now, we share early on social media, validate quickly, and build based on what resonates.

Lesson: Test fast. Learn faster.

🚀 What’s Next

Customisable UI

After building dark/light mode, I want to empower users to personalise their experience — theme, spacing, font, and features — for better accessibility and comfort.

Expressive design system

I’m evolving our system with expressive, human-centered micro-interactions to create more elegant, realistic, and emotionally engaging interfaces.

Business Challenge: building community

We’re now focused on building a meaningful community — sharing early, listening deeply, and growing alongside our learners.

📚 Resources

IBM Enterprise design thinking Toolkit: Assumptions and Questions

How To Make Design Impact by Vitaly Friedman

Information Architecture (IA)

• How To Create An Information Architecture That Is Easy To Use by Paul Boag
• Information And Information Architecture: The BIG Picture by Carrie Webster

Design system

• Carbon Design system
• Fluent 2
• Atlassian
• Material Design

Figma variables

• Deep Dive: unlock design system scalability with variables — Luis Ouriach, Jacob Miller(Config 2023)
• Figma tutorial: Intro to variables
• Figma for Edu: Variables and modes for layout in Figma
• My First Variable: Creating your first variables

Thank you so much for reading. 🧙🏻

💌 Any feedback or challenge

I’d love to hear your thoughts or say hello 👋 :

Connect with me on LinkedIn or Bluesky

Boosting the E-learning experience for Frontendly.io was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

👋 Hello Codesigners! I recently designed a website for Artist Kim Eull and wrote a case study. I want to share the CSS Sprite sheet Animation tips that I used in this project in this article.

🕹 ️Let’s get started.

1. Reduce image size in Photoshop

There are several ways to save PNG images in Photoshop.

I found a way to save it in the smallest size like the image below:

File> Export As > Smaller File (8-bit)

2. Make a sprite sheet in Photoshop

The sprite sheet size should be:

• Width = width of One Frame × Number of frames
• Height = height of One Frame

Example:

• 300px(frame width) × 30 frames = 9000px (width)
• 400px(frame height) = 400px (height)

3. Show > Grid

4. Setting grid size to fit a frame.

I configured gridline every 300px and subdivision as 1.

5. Put all images in the sprite sheet.

Put every PNG image in one sprite sheet like the image below:

Save this file as step 1 to get the smallest size file.

File> Export As > Smaller File (8-bit)

6. Write code

The above CSS animation ends with a blank image even though I put the animation-fill-mode: forwards; .

I wanted to stop on the last frame and thought about what I missed.

The value of steps should subtract one and the value of background-position should subtract the width of the frame.

Let’s change the code.

HOORAY!!!!!

Finally, the animation ends in the last frame.

🎈 That’s all for now

💌 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.

Happy Codedesign Today 🧙🏻‍♀️

CSS Sprite sheet Animation: PNG was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Basics of React

Hello, Codesigners 👋

This article is to share my React learnings and would be helpful if you have just started learning React and trying to understand how React works (e.g., for designers working with React engineers or someone who just started learning React), especially with Next.js.

Why am I learning React as a designer?

As we can see from the 2022 developer Survey above, React is one of the most popular frameworks and React is one of the core frameworks in many companies. That means, as a designer, there are many possibilities that you will come across React when working with engineers. So understanding React can give us many benefits when working on component-based design.

🤫 Psst! Frontendly.io is helping people become a really good frontend engineer 🌿, practice with real-world scenarios, and level up your front-end skills. Check it out! 🚀

Table of contents

• Setting up for React
• Structure & Workflow
• What are .tsx , .ts and modules.scss?
• index.ts is entry point
• Import & Export
• Anatomy of Chip component file
• Component names start with uppercase letters.
• What is different between <Link> of Next JS component and <a> tag of HTML?
• Use built-in components of Next.js
• Three important React concepts to remember: Props, States and Context

Setting up for React

You can quickly play with React without any installation/configuration from those online playgrounds.

🛝 CodeSandbox, Stackblitz or Codepen

Structure & Workflow

When I started learning React, I was so confused with how HTML, CSS (SASS), and React are organized altogether and connected to each other.

With pure JavaScript, the structure with HTML, CSS and JS was clear to me because those three languages were written physically separately in the different file structures. Below is the way I usually organized them.

But for React, this is the way I learnt how React is normally structured.

Between pure JS and React, the below is something I usually remember and configure differently.

Below is the visual representation of how React is structured.

What are .tsx, .ts and modules.scss?

Let’s see what those file extensions stand for.

• JSX allows us to write (like) HTML in React components.
• TypeScript ( .tsx, .ts) is a strongly typed programming language that builds on JavaScript.
• CSS Modules are for all class names and animation names scoped locally by default.

If you want to get more information, check out the below links.

📚 React & TypeScript

• Introducing JSX - React
• JavaScript With Syntax For Types.

📚 CSS Modules resources

• GitHub - css-modules/css-modules: Documentation about css-modules
• What are CSS Modules and why do we need them? | CSS-Tricks
• What are CSS Modules? A visual introduction

index.ts is entry point

When the browser reads files in the folder, it automatically finds the file named index at first and reads it.

Usually, the HTML file ( index.html ) is used as an entry point in pure JavaScript, but React uses a JavaScript file ( index.ts ) as an entry point.

I made an index.ts file in each components folder as an entry point. It makes the code easier to read when importing. See the comparison below. This is my personal preference so choose whichever way you like and stick with it. 🤗

Here is the code example of the index.ts file for the Chip component.

import Chip from './Chip';

export default Chip;

Import & Export

When we write React code, we use import and export syntax (ES Module) in almost all react files (.tsx, .ts) to composite components.

I was not familiar with this design pattern at the beginning but I’m getting used to it. 😅

Anatomy of Chip component file

The very first time when I saw React code, I was quite confused about what are HTML elements and what are Javascript functions.

For a simpler example, I took some screenshots of the Chip component and separated it into three languages, JSX (HTML), CSS and React (JS).

Component names start with uppercase letters.

The common practice is that React component names start with an uppercase letter whereas HTML tags start with a lowercase letter.

What is different between <Link> of Next JS component and <a> tag of HTML?

When we use a Link component in Next.js, Next.js takes care of re-rendering with the link so only a certain part is re-rendered rather than reloading the entire page which is how <a> tag in HTML usually works without any JavaScript intervention. It makes rendering a website so fast.

Use built-in components of Next.js

Next.js has many built-in components. Let’s import a Linkcomponent from Next.js like the below image.

Read more about Next.js documentation below.

Basic Features: Pages | Next.js

Three important React concepts to remember

• Props
• States
• Context

Props (Properties)

Props in React are data, an association between a name (or key) and a value, and passed to components to create different UI. We can name Props as we want and the property’s value can be a function.

// App

import Chip from './Chip';

export default function App() {
  return (
     <Chip color="selected"></Chip>
  );
}

// Chip

import classNames from 'classnames';
import styles from './Chip.module.scss';

interface ChipProps {
  color: string;
}

export default function Chip({color = 'default'}: ChipProps) {
  const classList = classNames({
    [styles['chip']]: true,
    [styles[`chip--${color}`]]: true,
  });

  return (
     <div color={classList}>...</div>
  );
}

// Chip.module.scss

.chip {
  border: 1px solid transparent;
}

.chip--default {
  color: white;
  border-color: white;
}

.chip--selected {
  color: pink;
  border-color: pink;
}

For example, we could send different colour data to the Chip component from the example above and we could display different styles depending on the color value by setting a different classname.

If we make the chip component as a design system, we can reuse (import) it anywhere we want, such as in different products.

I omitted the CSS module code here in the above infographic. If you wanted to see the CSS, check it out from the React structure infographic above.

Components and Props - React

States

The ultimate goal of React is to print UI (data) on the screen more efficiently and quickly. React changes (re-renders) the UI automatically using state. If you want to know more details about states, check out the below links.

Component State - React

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. — Reactjs

Using the State Hook - React

Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level. -Reactjs

Context - React

This is the way how I started with React.🧙🏻‍♀️

🎈 That’s all for now

📣 Frontendly.io is helping people become a really good frontend engineer 🌿, practice with real-world scenarios, and level up your front-end skills. Check it out! 🚀

💌 Any feedback or challenge

I’d love to hear your thoughts or say hello 👋 :

• 🤜🤛 Connect with me on LinkedIn or X.

• 👏 Give me a clap if you liked this post.

Happy codesign today 🧙🏻‍♀️🌿

The basics of React was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello, Codesigners!

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

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)

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.

📚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. 😉

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.

CSS Sprite sheet Animation: PNG

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 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.

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

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.

Understanding the basics of React (feat. Next.js)

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 was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

Collections updated 30 Jan 2023

This page(📚) is a repository of the Gallery Pattern references. I have been researching and collecting the awesome UI design and I will keep adding new findings here. Stay tuned.🤩

• Mocomuseum

Moco Museum

• MOMA

www.moma.org

• Groninger Museum

Groninger Museum

• Center Georges Pompidou

Centre Pompidou Paris

• Gagosian Gallery

Gagosian

• Saatchi Gallery

• Royal Academy

Royal Academy of Arts

• Museum of Contemporary Art Australia

• National Museum of Modern and Contemporary Art

https://www.mmca.go.kr/eng/engMain.do?langCd=02

• Tate

Tate

• The Wallace Collection

VIRTUAL EXHIBITIONS

https://embed-v4.vortic.io/#e=4470

The Wallace Collection

• Websites

BASIC Moves®

Pierre Choiniere Photo - Fashion Photographer / Photographe Mode

Work Index | HAUS

💧Codrops

Infinite WebGL Gallery | Demo 1 | Codrops

🕹 Codepen: Collections #Gallery

Collection #Gallery - a Collection by nana on CodePen

🎈 That’s all for now

💌 Do you know any good references for the Gallery Pattern?

If you would like to share any good Gallery pattern references, please feel free to let me know in the comment below or through my Twitter @nanacodesign 🤩

🎉 Happy codesign today

📚Gallery Pattern references was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

📚 Page transition

📚 Link

📚 List animation

📚 Mouse cursor effects

Website Collections

📚 Web design reference

📚 List animation reference

📚 Mouse cursor effects references

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

• Material design
• Atlassian Design

Colour contrast checker for accessibility

• WebAIM
• Colorable

Interactive frontend course

• FrontEnd30

💌 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. 😃

Case study: web design focused on interaction design. was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

: The Art of Toy Story 4

Today I would like to share my work on the editorial redesign of the Disney book, The Arts of Toy Story 4, into Korean.

First of all, I would let you know, some of the images of the book used in this article that all rights are reserved by Disney Enterprises, Inc. and Pixar Animation Studios.

Foreword

I was really happy when I got this project, Toy Story 4 because it’s one of my favourite Disney movies. It was two months before the movie release, so I was lucky to see the glimpse of the movie from the book and could guess what would happen in Toy Story 4. Also, I learnt a lot about how efficiently Disney works for print. Throughout this article, I am going to share three tips that I’ve learnt which would help editorial design work quicker and more efficiently.

Table of contents

• Tip1. Character Styles / Paragraph Styles
• Tip2. Find / Change
• Tip3. Eyedropper Tool

Tip 1. Character Styles and Paragraph Styles

The editor, Ji Eun, instructed me that I should not change any master layout design except the fonts formats in Korean during the kick-off meeting. When I saw the original InDesign file received from Disney, it was well organized with all contents, especially, Character Styles and Paragraph Styles.

A character style is a collection of character formatting attributes that can be applied to text in a single step. A paragraph style includes both character and paragraph formatting attributes and can be applied to a paragraph or range of paragraphs. — Adobe InDesign User Guide

Using those two style sheets provides many benefits, especially with two benefits I love the most.

Two benefits

1. Easily applying styles to the other layer

The first benefit is once specifying the formatting attributes as Character Styles or Paragraph Styles, it is easy to apply all formats to the other text layers (character or paragraph) automatically. This means that I do not have to touch individual format such as font size, leading, kerning, tracking, colour, hyphenation, bullet, etc. By doing so I could keep the design consistent in the entire documents.

Of course, I could change each character or each paragraph without the style sheet. However, for example, suppose that if there are 100 captions as the image above which should have the same 8 formats such as colour, font family, font style, font size, leading, tracking, alignment and indent, we have to click more than 800 times. It will be a very time-consuming and tedious work. On the other hand, if we have the caption style in the Paragraph Styles panel like the image above, we can just select all captions and click the caption style, then 100 caption layers will be updated with the caption style at once. Save your time and save your index finger.

2. Easily changing the formats of a style to all text (or paragraph) which was already specified

The second benefit is once you specify the same style, you can easily update the formats of a style to all text (or paragraph).

Let’s continue the example above again. There are 100 captions which have the same caption style and we have to change the font style (font-weight) of those captions from bold to light. To do this, double click a caption style¹ in the paragraph panel, and go to Basic Character Formats², and change the font style (font-weight)³˜⁴ from bold to light and click the OK⁵ button. We only need to click 5 times to change the 100 captions.

Why do I need a style sheet

After finishing the design work, the design might be changed and it happens frequently. For example, a client wants to change the primary colour or you find it better increasing the leading value for readability. In this project, I should change the Basic Character Formats in the style sheet for translating English into Korean. Let me explain more on how I worked with a style sheet in the real project.

Process

1. Find out which content was applied with which style.

As you already saw, I displayed panels, Character, Paragraph, Character Styles and Paragraph Styles in InDesign like the images below. In this way, I could immediately get the text or paragraph styles and formats.

For example, when I click the middle of the paragraph like the image above, I could find that this paragraph was applied with the TS4 — Extended Caption Indent style and it was highlighted with the yellow star in the Paragraph style panel.

Also, you must pay attention to each paragraph because each paragraph might have different styles even if they are in the same layer.

The first paragraph had a TS4-Extended Caption style.

However, the second paragraph had a TS4-Extended Caption Indent style. Thus, I had to paste each paragraph in Korean separately so that it would not lose their own style.

2. Change the font format which supports Korean in paragraph styles

I have already explained this step briefly above. However, in the real project, it was not quite simple. I had to examine more on the Paragraph Styles.

For example, in the TS4 — Extended Caption Indent style was based on the TS4 — Extended Caption like the red rectangle above. That means it has an attribute TS4 — Extended Caption, so I had to change the formattings in the TS4 — Extended Caption style.

As you can see from the image above, the TS4 — Extended Caption style isn’t based on any other Paragraph Style (in the red rectangle). So I changed the individual formats of the TS4 — Extended Caption style to update Korean font like the image below.

I changed formats of the TS4 — Extended Caption style to NanumBarunpen(나눔바른펜) font, font style to regular, size to 7.3 pt and leading to 16pt.

Here is the result.

Tip 2. Find/change

People typically say technology has made us lazy. But I don’t totally agree with that. Our laziness was the best motivation to bring the development of technology to our life and I believe one of the best inventions is the copy and paste, command(control) + c/v. Anyway, going back to the InDesign App, there is a time-saving function, Find/change which I use frequently.

As you can see from the images above, the name, Mara MacMahon, was the same and mentioned frequently in the entire documents. In this case, I used a Find/Change function to change it from English to Korean. Here are the steps.

① Copy the words that I wanted to change.

②~③ Open the Find/Change panel

④ Paste the words that I copied from step ①

⑤ Type or paste the words that I wanted to put in

⑥ Select All Documents

⑦ Click the Change All button

⑧ Click the Done button, and then the pop-up window will appear

⑨ Click the OK button

This Find/change can apply to not only text but also many search options such as GREP, Glyph, Object. You can find more information about this function from the link below.

Find/Change text in InDesign

Tip 3. Eyedropper Tool

One of the biggest challenges was to redesign the handwriting contents translating in Korean. It was a JPG image file with other drawings, so I couldn’t edit the image directly in InDesign.

I discussed with the editor and we came up with three options.

Option 1: Add a small text caption at the end of the image and do not make any changes on the other images. we tried this option (see the image below), but it was hard to read with low readability.

Option 2: Remove the handwriting text area in English with Photoshop and add Korean instead. This result would bring us the best readability, however, both the editor and myself were not happy with this option. It was because we thought the handwriting in English was a part of the artwork so we wanted to keep it. Also, this option would take much longer time, that means the agent had to spend more budget.

✅ Option 3: Juxtapose English with Korean: we decided to use this option even if it may look a bit dense in some pages. With this option, it was important to put both English and Korean handwriting in harmony. To do this, I used the Nanum Pen Script(나눔손글씨) font which is the handwriting font and picked the same colour with the Eyedropper tool from the English handwriting.

How to set the Eyedropper tool

① Make sure there is no other layer above the image which has the fill and stroke attributes you want to sample

📍Problem

At first, I couldn’t pick the colour that I wanted from the image. It was because there was a transparent layer on the image. From the image as an example, I wanted to pick a yellow colour in the yellow rectangle layer, but there was an invisible layer which has a green colour with opacity 0%.

Let’s see what happens.

The text colour was changed to green.

When I copied the fill colour using Eyedropper in the overlayed yellow rectangle, the position of the transparent rectangle which has a green colour was actually picked so the text layer was changed to green and not yellow. However, when I copied the left side of the yellow rectangle, the text layer colour was changed to yellow because the position wasn’t as part of the transparent green rectangle.

💡 Solution

Hide the toggles visibility above the layer you want to get a sample from.

② Set Eyedropper options

📍Problem

In this case, I wanted to get a fill colour only without copying any other attributes from the artwork image. If you apply all attributes from the Eyedropper options, the text layer you are applying to will disappear like the image below.

💡 Solution

So I set the Eyedropper options like the image below to get a fill colour only.

③ Apply colours to Korean layer using the Eyedropper

Click the Eyedropper tool or press command + I (for mac), and then the mouse pointer will be changed to the “select mode”, the first icon from the image below.

And click on the colour that you wanted to get and then the mouse pointer will be changed to the “loaded to object” and let you know the colour was loaded.

Lastly, when you hover on the text that you wanted to make a change, the mouse pointer will change like the third icon below. Keep in mind that there is the Eyedropper tool in Photoshop and Illustrator too but those icons and functions are a bit different.

📖 Resources

• Check out more details about this project 👉Go to Behance
• Apply paragraph and character text styles in Adobe InDesign

Apply paragraph and character text styles in Adobe InDesign

• Find/Change text in InDesign

Find/Change text in InDesign

• Apply colours to objects in an Adobe InDesign document

Apply colors to objects in an Adobe InDesign document

• Free fonts in Korean which I used in this project

NanumBarunpen(나눔바른펜)

Nanum Pen Script(나눔손글씨)

Sandoll Childfundkorea(산돌초록우산어린이체)

📣 A shout-out to Naver, Sandoll and Child fund Korea for making this great open source font. 🙏

📝 Note

Actually, when I worked on this project, I set the language of the InDesign App to Korean. However, when I was writing this article, I set the language of the InDesign App to English to explain it better.

© Copyright of the book: The Art of Toy Story 4

Copyright ⓒ 2019 by Disney Enterprises, Inc. and Pixar Animation Studios. All rights reserved. No part of this book may be reproduced in any form without written permission from the publisher. First Published in English by Chronicle Books LLC, San Francisco, Califonia. Manufactured in Korea

💌 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 The story of web design: the artist NamSin Kwak’s website. Please stay tuned and gives me 👏loves if you liked it.

The story of editorial design for book ²/₂ was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

: Cookbook

Today I would like to share my work on the editorial redesign of Japanese cookbook, The premium cuisine of Sima 志麻さんのプレミアムな作りおき, into Korean.

First of all, I would let you know, some of the images of the book, I used in this article, that all rights are reserved by Shima.

Foreword

I have a lot of experience in print design such as book, booklet, zine, poster, x-banner, etc, for the last 5 years. For most of my projects, I design it from scratch with the design assets provided by clients. However, with this project, the final InDesign files were provided in Japanese and I had to redesign all to fit Korean translated from Japanese into a new layout. Throughout this article, I will share a redesign process and how I identified the problems and approached the solutions.

Table of contents

• Design process
• Design problems (📍) & solutions (💡)

Design process

Book editorial design has a different process unlike any other print work, booklet, poster, sticker, etc. It is divided into 2 steps.

Step 1: Selecting & redesigning master pages

The first step is to select master pages with an editor. The layout from the master pages will then be shared with other pages, more than 100 pages for this design work. By doing so, we don’t have to redesign the layout for every single page separately. For this project, the editor Ji Eun and I selected 16 master pages.

After selecting master pages, I organized the hierarchy of headings, sub-headings, body, and captions. Also, I researched suitable typefaces and looked at the copyrights of them to see if it could be used commercially. And then I redesigned the master pages in different 3 types, discussed them with the editor and chose the final draft design. I spent most of the time in this step.

Step2: Redesigning all pages

After the final draft design was decided, it was time to move the translated content from the Word to the design. Typically the original text layers include its own Character Styles and Paragraph Styles when given to us, however, for this project, the files received from the client did not include them.

So I had to make the new Character Styles and Paragraph Styles for the final draft design (see the screenshot below) and applied it to all pages too.

If you wanted to learn more about how to make style sheet, I would recommend this video, How to Master Text Formatting by Using Style Sheets.

In this project, I used two typefaces, Adobe Source Han Sans KR and Source Han Serif KR which are the same font as Google Noto. And I decided to go with a lot of variations due to the various hierarchies, titles, subtitles, caption and glyphs.

* A shout-out to Google and Adobe for making this great open source font. 🙏

• Google Noto Fonts
• Source Han Sans Korean | Adobe Fonts
• adobe-fonts/source-han-serif
• adobe-fonts/source-han-sans

Design problems (📍) & solutions (💡)

Before I started the design work, I thought it would be a simple design work, for example, copying and pasting Korean into the new layout and do some minor editing such as updating typeface, font size, kerning, leading etc. However, I found that there were much more complex design problems I had to solve. Let’s see what I faced and how solved them.

📍 Problem: Missing fonts

The very first problem I faced was that the Japanese fonts were missing. Without the correct Japanese typefaces, it was quite difficult to compare the original layout with the new layout because it did not provide the correct position and space in the layout.

💡 Solution: Compare with the original PDF file

The best solution would be to receive the Japanese fonts from the client however, unfortunately, it was not the case this time. So my solution was to compare the original layout from the PDF files which were provided by the client. It was not perfect but worked ok.

📍 Problem: Missing Plug-ins

I never had a chance to use plugins in Adobe InDesign before. At first, I just ignored the pop-up window like the image above and clicked the ‘OK’ button. However, this caused a problem when I had to make the package file later like the images below.

* Normally I hand off clients a package folder which includes all the assets, linked images, Document fonts, InDesign file and PDF so that the client can edit the design without my help.

I was not sure where to find and how to install the missing plugins. I spent quite a bit of time to find a solution like being Sherlock Homes. Finally, I found it which was not what I expected.

💡 Solution: Save as IDML file.

When you save the file, you can choose the file format as InDesign CS4 or later (IDML). Once you save the file as IDML format, the plug-ins will be gone as the screenshot below.

Though It is important to make sure the final design outcome without those plugins are what the client has envisaged. In this case, the client was happy with the final design.

In case if you know any better way, please share with me 😄

📍 Problem: Different languages

Languages are complicated. The rules of typographic of each language are different. Adobe InDesign is well organized to design for each language. InDesign has different options and configurations depending on which language you are working with. For example, Korean provides additional settings as the screenshot below.

💡 Solution: Set the language of InDesign app

I always reset InDesign app language which I am working with for the specific project. In this project, I have reset it as the Korean version.

To update the language in InDesign, go to Preferences in the Adobe Creative Cloud and change the App Language.

* If the language is still in English version or didn’t get changed in InDesign, uninstall InDesign and install it again.

📍 Problem: Vertical writing (↧) to horizontal writing(↦)

Changing the writing direction from vertical to horizontal was not an easy work. To do it, I had to go through certain steps.

💡 Solution: Change the page order → swap contents from right to left → make a new horizontal text layer

First of all, I had to change the page order in the master page and swapped all contents from right to left including text layers, caption layers, photos etc.

Secondly, even if the text layer had a character style and paragraph style, I could not reuse it and it was actually easier to remove text layers and make new horizontal text styles.

This took longer than I thought and probably I should have taken this into account with my initial estimate. It was good learning.

* Korean (Hangul) was designed for vertical writing in 1446. Sadly, after inventing the computer and diffusing computerized typesetting as Western languages, Korean’s vertical writing culture has gone very fast compare to Japan or China. Because of, I assume, Korea’s “Pali-pali (Hurry up)” culture.

📖 Read more

Horizontal and vertical writing in East Asian scripts - Wikipedia

📍Problem: Low Legibility and readability

When I saw receipt pages, the layout had a high density and was inconsistent. It was difficult to distinguish the contents. The editor and I decided to make a new layout design. See the layout design with the original design below.

I believe the legibility is one of the most important factors for editorial design, especially, where there are so many different contents and hierarchies. I wanted to redesign it so readers could recognise immediately what it was, as soon as they saw the layout style.

To do that, it was important to present the details (micro typography) such as letter, word, line-spacing, column, etc to make a readable design. There are 3 solutions I’d like to share below.

💡 Solution: One primary colour

The original design had three colours such as brown, red and blue. I guess the previous designer intended to give legibility using those colours. However, I thought there are too many colours on one page and there isn’t any connection between those three colours. So I decided to use only one colour, orange. Also, I have changed the font size, font weight and line height to replace what those three colours were used for, for example, separating the paragraphs.

💡 Solution: Add a different gap between different paragraph.

The original design had the same leading value in all contents such as Ingredients, Method and Memo sections. It looked like those three contents had the same level of the hierarchy. I increased the leading value of Method paragraphs and changed the font face, size and leading of Memo paragraph.

That provided much clearer space between sentences and paragraphs which improved the readability.

* Of course, it was discussed with the editor before redesigning.

💡 Solution: Consistent layout.

When I saw those original Receipt layout (left images), it was hard to read because text layers had a high-density and it overrode with the photo layers. Also, the position of the layer wasn’t consistent. Thus, I made the master layout design for the Receipt page like right images above.

The position of the photo, title, subtitle and body is always the same. It helps readers not have to spend much time to find where to read. Also, I reduced the photo sizes to give more space to the body text for better readability.

Acknowledgements

I truly believe that the editorial designer must care about details with letters, words, lines, paragraphs and columns for better readability. If you wanted to learn more on that, I would recommend this book, Detail In Typography by Jost Hochuli.

Thanks for reading a long story.

📖 Reference

• Check out more details about this project 👉Go to Behance
• Book: Detail In Typography by Jost Hochuli

Detail in typography

• what is the difference between legibility and readability

Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface.

Typography: Readability and Legibility (Part 1) - SitePoint

📝 Note

Actually, when I worked on this project, I set the language of the InDesign App to Korean. However, when I was writing this article, I set the language of the InDesign App to English to explain it better.

© Copyright of the book: 志麻さんのプレミアムな作りおき

Copyright of The premium cuisine of Sima 志麻さんのプレミアムな作りおき: SHIMA SAN NO PREMIUM NA TSUKURIOKI by Shima Copyright © 2017 Shima / Korean translation copyright © 2019 by Charmdol All rights reserved. / Original Japanese language edition published by Diamond, Inc. / Korean translation rights arranged With Diamond, Inc. through Botong Agency

💌 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

Please check out the next article: The story of editorial design for book ²/₂
: The Art of Toy Story 4

Stay tuned and gives me 👏loves if you liked it.

The story of editorial design for book ¹/₂ was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

Collections updated 1 Nov 2019

This repository(📚) is part of a series on Collections of Web design references.

I have been researching and collecting the awesome UI design and I will keep adding new findings here. Stay tuned.🤩

Niccolò Miranda - Portfolio

A Short Journey

Mariano Pascual

Lynn Fisher

&yet

Nomadic Tribe - makemepulse

Build Securely

https://ifthisthendominos.com/browse

Sound Effect

Orano

Home - Eat Genesis

Mouse lighting effect

Universal Love

Studio Regale

Design Documentary

Stuurmen - Branding & Digital agency · Eindhoven

Aristide Benoist - Freelance Developer

HANABI - Sweet Summer Memories designed by LIG INC.

http://2018.monopo.co.jp/

http://springsummer.gucci.com/

• Startup Fair 2018
• RUYA Digital | Leading digital Agency in Dubai

Duroc

Home | Laws of UX

Studio - Phoenix The Creative Studio

The Mads

BASIC™ | Culture Manual | An Employee Guide to Being More Basic

Crypton - cryptocurrency trading bot based on machine learning.

Creddy

The History of Connection

Nike React

• Home - Frans Hals Museum
• Mortimer's CARGO - 2017
• Particle Love

Papricaklubben - Spela, lek och lär om frukt och grönt

https://fullystudios.se/about/

KIKK 2018 - KIKK Festival 2018 - 8th edition

📚Web design reference was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.

Collections updated 5 April 2019

This page(📚) is a repository of the List Animation references. I have been researching and collecting the awesome UI design and I will keep adding new findings here. Stay tuned.🤩

✨ Website

🕹 Codepen: Collections #List animation

Collections #List animation - a Collection by nana on CodePen

🏆awwwards: List

Awwwards Nominees

🎈 That’s all for now

💌 Do you know any good references for List animation?

If you would like to share any good Mouse cursor effect references, please feel free let me know in the comment below or through my Twitter @nanacodesign 🤩

☕️Lastly, I would love to share <FrontEnd30 /> where I learned many cool front-end techniques. Big thanks to Ryan Yu for sharing super unique front-end skills with me.

🎉 Happy codesign today

📚 List animation reference was originally published in Design & Code Repository on Medium, where people are continuing the conversation by highlighting and responding to this story.